/* ==========================================================================
   OptiML CX Platform — shared module hero
   Pattern adapted from css/optiml-qms.css (.qms_hero) and scoped to .pf_hero
   so platform module pages do not depend on the QMS stylesheet.
   ========================================================================== */

section.inner_page_top.pf_hero {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, #102A4B 30%, #21738c 120%) !important;
    background-color: #102A4B;
    background-size: cover;
    color: #fff;
}

.pf_hero .container {
    position: relative;
    z-index: 1;
}

section.inner_page_top.pf_hero .inner_page_title,
section.inner_page_top.pf_hero .inner_page_sub_title,
section.inner_page_top.pf_hero .inner_page_descp,
section.inner_page_top.pf_hero ul,
section.inner_page_top.pf_hero li,
section.inner_page_top.pf_hero a {
    color: #fff !important;
}

/* soft moving glow behind the copy */
.pf_hero::after {
    content: "";
    position: absolute;
    top: -140px;
    left: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49, 186, 230, .35) 0%, rgba(49, 186, 230, 0) 70%);
    z-index: 0;
    animation: pf_glow_drift 12s ease-in-out infinite alternate;
}

@keyframes pf_glow_drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(70px, 60px, 0); }
}

/* --- Copy column ------------------------------------------------------- */

.pf_hero_copy {
    padding: 30px 0;
}

/* screen-reader-only text (form labels) */
.pf_visually_hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* breadcrumb: OptiML CX Platform › Module */
.pf_hero_crumb {
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78) !important;
}

.pf_hero_crumb ol {
    display: flex;
    flex-wrap: wrap;
    /* Baseline, not centre: the linked crumbs carry top padding for a 24px tap
       target and the current-page crumb does not, so centring would leave the
       two sets of words 3-4px out of line. */
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The separator belongs to the crumb it follows, not the one it precedes. As
   `li + li::before` it opened a wrapped line with a lone chevron ahead of the
   last crumb; rendered as the previous crumb's ::after it stays on line one
   where it separates something. The 8px gap either side is unchanged — the
   ol's own gap now falls to the right of the glyph instead of the left — so a
   trail that does not wrap renders pixel for pixel as before. */
.pf_hero_crumb li:not(:last-child)::after {
    content: "\203A";
    margin-left: 8px;
    color: rgba(255, 255, 255, .5);
}

/* 12px text sits in a 17px line box, which is short of the 24px minimum tap
   target. Take the extra 7px on the top edge only: the border-bottom below is
   the link's underline, so bottom padding would drop it away from the word. */
.pf_hero_crumb a {
    display: inline-block;
    padding-top: 7px;
    color: rgba(255, 255, 255, .9) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    transition: color .2s ease, border-color .2s ease;
}

.pf_hero_crumb a:hover,
.pf_hero_crumb a:focus-visible {
    color: #7fd4f2 !important;
    border-bottom-color: #7fd4f2;
}

.pf_hero_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 7px 16px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
}

.pf_hero_badge i {
    color: #31bae6;
    font-size: 12px;
}

section.inner_page_top.pf_hero .inner_page_title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 14px;
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.pf_hero .inner_page_title .pf_title_accent {
    color: #31bae6 !important;
}

section.inner_page_top.pf_hero .inner_page_descp {
    font-size: 19px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    margin-bottom: 22px;
}

/* --- Feature chips ----------------------------------------------------- */

.pf_hero_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0 0 26px;
    list-style: none;
}

.pf_hero_chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

.pf_hero_chips li:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(49, 186, 230, .7);
    transform: translateY(-2px);
}

.pf_hero_chips li i {
    color: #16a64a;
    font-size: 13px;
}

/* --- Inline demo form -------------------------------------------------- */

.pf_hero .theme-form-submit {
    max-width: 470px;
    margin: 0;
}

.pf_hero .theme-form-submit .input-group {
    padding: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
    flex-wrap: nowrap;
}

.pf_hero .theme-form-submit .form-control {
    height: 46px;
    border: none;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
}

.pf_hero .theme-form-submit .form-control::placeholder {
    color: #555;
}

.pf_hero .theme-form-submit .form-control:focus {
    box-shadow: 0 0 0 3px rgba(49, 186, 230, .35);
}

.pf_hero .theme-form-submit .btn-primary {
    height: 46px;
    padding: 0 26px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    background: linear-gradient(135deg, #f0812d 0%, #e4252e 100%);
    box-shadow: 0 6px 18px rgba(240, 129, 45, .38);
    transition: transform .25s ease, box-shadow .25s ease;
}

.pf_hero .theme-form-submit .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(240, 129, 45, .5);
    color: #fff !important;
}

.pf_hero_video_cta {

    height: 46px;
    padding: 0 72px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    background: #fff;
    box-shadow: 4px 5px 20px rgb(0 0 0 / 30%);
    transition: transform .25s ease, box-shadow .25s ease;
    width: max-content;
    text-align: center;
    color: #000 !important;
    width: max-content;
    justify-content: center;
}


.pf_hero_video_cta:hover {
    transform: translateY(-2px);
  box-shadow: 4px 5px 20px rgb(0 0 0 / 30%);
 color: #000 !important;
}

.pf_hero .errorMessage1 {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #ffd5d8 !important;
}

.pf_hero .errorMessage1:empty {
    display: none;
}

.pf_hero_form_help {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
}

/* keyboard focus must stay visible on the dark gradient */
.pf_hero a:focus-visible,
.pf_hero button:focus-visible,
.pf_hero input:focus-visible {
    outline: 2px solid #7fd4f2;
    outline-offset: 2px;
}

/* --- Trust strip ------------------------------------------------------- */

/* Grid, not wrapped flex: a long label must wrap inside its own column rather
   than push the next item onto a new row. Wrapped flex turned this strip into
   three stacked rows on pages with descriptive labels. */
.pf_hero_trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Two shared rows: values on row 1, labels on row 2. Without this a value
       that wraps to two lines pushes its own label a line lower than the
       other two, breaking the caption line. Column gap only - the rows are
       the value/label pair and want no gap between them. */
    grid-template-rows: auto auto;
    column-gap: 24px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

/* the wrapper stays for markup/semantics; the rows belong to the parent grid */
.pf_hero_trust_item {
    display: contents;
}

.pf_hero_trust_item .pf_hero_trust_value {
    grid-row: 1;
    min-width: 0;
    display: block;
    overflow-wrap: break-word;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.pf_hero_trust_item .pf_hero_trust_label {
    grid-row: 2;
    min-width: 0;
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    letter-spacing: .3px;
    color: rgba(255, 255, 255, .78);
}

/* --- Visual column ----------------------------------------------------- */

.pf_hero_visual {
    position: relative;
    width: 100%;
    height: 400px !important;
}

.pf_hero_visual_frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    animation: pf_float 6s ease-in-out infinite;
    height: 100%;
}

.pf_hero_visual_frame img,
.pf_hero_visual_frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Hero video (OptiMLCX.mp4)

   The still it replaces was roughly 4:3, and the frame below crops to a
   portrait-ish box so it fills the column beside the copy. The video is 16:9
   and uses its full width - the product rail sits hard against the left edge
   and the insights panel against the right - so cropping it to that box would
   remove both. This frame therefore keeps the video's own ratio rather than
   the still's.
   --------------------------------------------------------------------------- */

/* .pf_hero_visual_frame--video {
    aspect-ratio: 16 / 9;
    background: #0a1425;
} */

.pf_hero_video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf_hero_video_toggle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(10, 20, 37, .72);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease, border-color .2s ease;
}

/* Motion that runs for more than five seconds needs a way to stop it, so the
   control is always reachable by keyboard and by touch - it only fades for a
   mouse user who is not pointing at the frame. */
.pf_hero_visual_frame--video:hover .pf_hero_video_toggle,
.pf_hero_video_toggle:focus-visible,
.pf_hero_video_toggle.is-paused {
    opacity: 1;
}

@media (hover: none) {
    .pf_hero_video_toggle { opacity: 1; }
}

.pf_hero_video_toggle:hover {
    background: rgba(9, 79, 183, .92);
    border-color: #fff;
}

.pf_hero_video_toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* From lg up the copy column is much taller than a 4:3 photo, which left the
   visual stranded in the middle of a lot of empty gradient. Give the frame a
   portrait-ish minimum and let the image cover it. */


@keyframes pf_float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.pf_hero_visual_frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 32, 71, .45), transparent 55%);
    pointer-events: none;
}

/* --- Product mock in the hero ------------------------------------------
   The mocks are fluid layouts designed for a ~900px column; dropped straight
   into the hero column their internal grids collapse. So render at a fixed
   design width and scale the whole thing down, which keeps the proportions
   the mock was drawn at. --pf-mock-w is the design width, --pf-mock-s the
   scale; the stage height is derived from both so no space is left over. */
.pf_hero_mock_stage {
    --pf-mock-w: 920px;
    --pf-mock-s: .58; /* placeholder; recomputed from the column at runtime */
    position: relative;
    width: 100%;
    height: calc(var(--pf-mock-h) * var(--pf-mock-s));
    overflow: hidden;
}

.pf_hero_mock {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pf-mock-w);
    transform: scale(var(--pf-mock-s));
    transform-origin: top left;
    pointer-events: none;
}

/* The mock ships its own figure margins; the hero doesn't want them. It also
   ships a 720px cap meant for an in-page card, which left the figure 200px
   short of the 920px design width — 117px of empty navy down the right of the
   stage at 1440, pulling the whole hero left of centre. The stage is already
   sized to the column and the scale is derived from it, so letting the figure
   fill the design width costs nothing and squares the mock with the container. */
.pf_hero_mock .mock-figure {
    margin: 0;
    max-width: none;
}

.pf_hero_mock .mock-cap {
    display: none;
}

.pf_hero_mock .mock {
    box-shadow: 0 30px 70px rgba(0, 12, 34, .45), 0 4px 14px rgba(0, 12, 34, .25);
}

/* With a real product mock on screen the floating stat card is noise, and the
   trust strip already carries the same figure. */
.pf_hero_visual--mock .pf_hero_stat_card {
    display: none;
}

/* Fade the bottom edge only when the mock is actually taller than the stage,
   so a clipped mock reads as deliberate rather than broken. */
.pf_hero_mock_stage.is-clipped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(to top, rgba(16, 42, 75, .96), rgba(16, 42, 75, 0));
    pointer-events: none;
    z-index: 1;
}

/* Only the design width is set per breakpoint — the scale is computed from the
   column at runtime. Below 860px the mock's own CSS drops its side rails, so a
   narrower design width there gives a bigger, more legible result. */
@media (max-width: 991px) {
    .pf_hero_mock_stage { --pf-mock-w: 820px; }
}

@media (max-width: 767px) {
    .pf_hero_mock_stage { --pf-mock-w: 640px; }
}

@media (max-width: 480px) {
    .pf_hero_mock_stage { --pf-mock-w: 560px; }
}

/* floating stat card over the image */
.pf_hero_stat_card {
    position: absolute;
    bottom: 26px;
    left: -18px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* capped so a descriptive label cannot grow the card across the image */
    max-width: min(280px, 88%);
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    z-index: 2;
}

.pf_hero_stat_card > div {
    min-width: 0;
}

.pf_hero_stat_card i {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(22, 166, 74, .12);
    color: #16a64a;
    font-size: 16px;
}

.pf_hero_stat_card .pf_hero_stat_value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: #0a1425;
}

.pf_hero_stat_card .pf_hero_stat_label {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    color: #55595a;
}

/* --- Intro band under the hero ----------------------------------------- */

.pf_hero_intro_heading {
    color: #fff !important;
    font-size: 30px !important;
}

.pf_hero_intro_para {
    font-size: 18px !important;
    color: rgba(255, 255, 255, .92) !important;
    line-height: 30px !important;
}

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

@media (max-width: 991px) {
    section.inner_page_top.pf_hero .inner_page_title { font-size: 36px; }
    section.inner_page_top.pf_hero .inner_page_descp { font-size: 17px; }
    .pf_hero_trust { column-gap: 20px; }
    .pf_hero_trust_item .pf_hero_trust_value { font-size: 21px; }
    .pf_hero_stat_card { left: 12px; bottom: 14px; padding: 11px 14px; }
    .pf_hero_intro_heading { font-size: 24px !important; }
}

@media (max-width: 767px) {
    section.inner_page_top.pf_hero .inner_page_title { font-size: 30px; }
    section.inner_page_top.pf_hero .inner_page_descp { font-size: 16px; line-height: 1.6; }
    .pf_hero_copy { padding: 18px 0; }
    .pf_hero_visual_frame { animation: none; }
    .pf_hero .theme-form-submit .btn-primary { padding: 0 16px; font-size: 14px; }
    .pf_hero_stat_card {
        position: absolute;
        left: -8px;
        bottom: 32px;
    }

    .pf_hero_stat_card i {
        flex: 0 0 auto;
        width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(22, 166, 74, .12);
        color: #16a64a;
        font-size: 10px;
    }

    .pf_hero_stat_card .pf_hero_stat_value {
                display: block;
                font-size: 16px;
                font-weight: 800;
                line-height: 1.2;
                color: #0a1425;
            }

    .pf_hero_stat_card .pf_hero_stat_label {
        display: block;
        font-size: 10px;
        line-height: 1.35;
        color: #55595a;
    }

    /* Wrapped flex turned the chips and the trust strip into tall stacks that
       pushed the whole hero past two viewport heights. Grid them instead. */
    .pf_hero_chips {
        gap: 8px;
        margin-bottom: 20px;
    }

    .pf_hero_chips li {
        padding: 7px 12px;
        font-size: 12.5px;
    }

    .pf_hero_trust {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 12px;
        margin-top: 20px;
        padding-top: 18px;
    }

    .pf_hero_trust_item .pf_hero_trust_value { font-size: 20px; }
    .pf_hero_trust_item .pf_hero_trust_label { font-size: 11.5px; line-height: 1.35; }

    .pf_hero_intro_heading { font-size: 21px !important; }
    .pf_hero_intro_para { font-size: 15.5px !important; line-height: 25px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .pf_hero::after,
    .pf_hero_visual_frame { animation: none; }
}

/* The Solutions hero renders the mock's caption outside the aria-hidden mock
   wrapper, so the "sample data, not a performance claim" disclaimer is
   readable and announced. .pf_hero_mock .mock-cap above still hides the
   caption when it sits inside the mock itself. */
p.pf_hero_mock_caption,
.pf_hero_mock_caption.sol-body,
.pf_hero_mock_caption {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.pf_hero_mock_caption .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* /* --------------------------------------------------------------------------
   Voice AI hero demo panel (replaces the hero still)
   -------------------------------------------------------------------------- */
.pf_hero_visual--voice {
    height: auto !important;
    min-height: 430px;
}

/* The demo carries its own stat, so hide the hero card. */
.pf_hero_visual--voice .pf_hero_stat_card { display: none; }

.va_hero {
    position: relative;
    height: 100%;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.va_hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #31bae6, #0878ed, #31bae6);
}

.va_hero__head { text-align: center; }

.va_hero__head .va_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(49, 186, 230, 0.12);
    border: 1px solid rgba(49, 186, 230, 0.25);
    color: #a2e1f6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.va_hero__lead {
    margin: 0 auto;
    max-width: 34ch;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}
/* 
.va_hero .industry-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
} */

.va_hero .industry-tab {
    position: relative;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 14px 16px;
    border: 1px solid rgb(142 150 156);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 76, 175, 0.06);
    transition: all 0.25s ease;
}

.va_hero .industry-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #0878ed, #31bae6);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.va_hero .industry-tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 76, 175, 0.12);
}

.va_hero .industry-tab.active {
    border-color: #0878ed;
    box-shadow: 0 8px 22px rgba(8, 120, 237, 0.18);
    background-color: rgb(255 255 255);
}

.va_hero .industry-tab.active::before { transform: scaleX(1); }

.va_hero .industry-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0878ed, #31bae6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease;
}

.va_hero .industry-icon i { font-size: 1.1rem; }

.va_hero .industry-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #fff;
    transition: 0.25s ease;
}

.va_hero .industry-action {
    display: block;
    font-size: 11.5px;
    color: #fff;
    transition: 0.25s ease;
}

.va_hero .agent-content {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: auto;
}

.va_hero .agent-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.va_hero .agent-eyebrow {
    flex-basis: 100%;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a2e1f6;
    margin: 0;
}

.va_hero .agent-action-title,
.va_hero .agent-action-sub {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.va_hero .agent-sep { color: rgba(255,255,255,.3); }

.va_hero .agent-lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(49, 186, 230, 0.14);
    border: 1px solid rgba(49, 186, 230, 0.28);
    color: #a2e1f6;
    font-size: 11.5px;
    font-weight: 600;
}

.va_hero .audio-player {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
}

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

.va_hero .waveform {
    flex: 1;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
}

.va_hero .wave-bar {
    width: 3px;
    min-width: 3px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.va_hero .audio-player.playing .wave-bar {
    animation: waveAnimationHero 0.8s ease-in-out infinite alternate;
}

.va_hero .audio-player.playing .wave-bar:nth-child(2n) { animation-delay: 0.15s; }
.va_hero .audio-player.playing .wave-bar:nth-child(3n) { animation-delay: 0.3s; }

@keyframes waveAnimationHero {
    from { transform: scaleY(0.5); background: #6ac2ff; }
    to { transform: scaleY(1.35); background: #31bae6; }
}

.va_hero .play-button {
    position: relative;
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(145deg, #46a8ff, #0878ed);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 115, 255, 0.25);
    transition: 0.25s ease;
}

.va_hero .play-button:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 28px rgba(0, 115, 255, 0.35);
}

.va_hero .play-icon {
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 13px solid #fff;
    margin-left: 3px;
}

.va_hero .pause-icon {
    width: 14px;
    height: 19px;
    border-left: 4px solid #fff;
    border-right: 4px solid #fff;
}

.va_hero .play-button::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(49, 186, 230, 0.5);
    opacity: 0;
    pointer-events: none;
}

.va_hero .audio-player.playing .play-button::after {
    animation: playPulseHero 1.8s ease-out infinite;
}

@keyframes playPulseHero {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.55); opacity: 0; }
}

@media (max-width: 1199px) {
    .va_hero { padding: 18px; }
    .va_hero .industry-tab { padding: 12px; }
    .va_hero .industry-icon { width: 38px; height: 38px; }
    .va_hero .industry-name { font-size: 13px; }
}

@media (max-width: 991px) {
    .pf_hero_visual--voice { min-height: 380px; }
    .va_hero { gap: 14px; }
}

@media (max-width: 767px) {
    .pf_hero_visual--voice { min-height: unset; }
    .va_hero { padding: 20px; }
    .va_hero .industry-tabs { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .va_hero .industry-tab,
    .va_hero .play-button,
    .va_hero .wave-bar,
    .va_hero .play-button::after { animation: none !important; transition: none !important; }
}

/* Watch video CTA in the hero form */
.pf_hero_video_cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.pf_hero_video_cta i { font-size: 12px; }

/* Product video modal */
.pf_video_modal .modal-content {
    background: #0a1425;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    overflow: hidden;
}

.pf_video_modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 16px 20px;
}

.pf_video_modal .modal-title { font-weight: 700; }

.pf_video_modal .modal-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}

.pf_video_modal .modal-header .close:hover { opacity: 1; }

.pf_video_wrap {
    position: relative;
    background: #000;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pf_video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.pf_video_play {
    position: absolute;
    width: 78px;
    height: 78px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #0878ed;
    font-size: 24px;
    cursor: pointer;
    transition: 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

.pf_video_play:hover,
.pf_video_play:focus {
    transform: scale(1.06);
    background: #fff;
}

@media (max-width: 575px) {
    .pf_hero_video_cta { padding: 8px 12px; font-size: 13px; }
    .pf_video_play { width: 62px; height: 62px; font-size: 20px; }
    .pf_video_modal .modal-header { padding: 12px 16px; }
}