/* ==========================================================================
   Home page — OptiML CX Platform showcase
   A narrative scroll: four story blocks, each pairing a short piece of copy
   with the real product mock for that stage of a conversation. The mocks come
   from _platform_diagrams.php and are styled by css/voice-ai-diagrams.css, so
   this file only handles the section frame, the copy column and the scaling
   stage the mocks sit in.
   ========================================================================== */

.hp_platform {
    position: relative;
    padding: 76px 0 84px;
    background: #f4f7fb;
    overflow: hidden;
}

.hp_platform::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(9, 79, 183, .10) 0%, rgba(9, 79, 183, 0) 70%);
    pointer-events: none;
}

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

/* --- Section head ------------------------------------------------------ */

.hp_platform_head {
    max-width: 780px;
    margin: 0 auto 12px;
    text-align: center;
}

.hp_platform_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin-bottom: 16px;
    border-radius: 100px;
    background: rgba(9, 79, 183, .1);
    color: #094fb7;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

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

.hp_platform_head .hp_platform_title {
    margin-bottom: 14px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: #102A4B;
}

.hp_platform_lead {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.75;
    color: #5e6162;
}

/* --- Story rows -------------------------------------------------------- */

/* Each story is one card holding both halves: copy on one side, the product
   mock on the other. .hp_story is a Bootstrap .row, so its negative gutters
   have to be cleared before it can carry a border. */
.hp_story {
    position: relative;
    align-items: center;
    margin: 56px 0 0;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e6ecf4;
    box-shadow: 0 14px 38px rgba(16, 42, 75, .07);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.hp_story:hover {
    transform: translateY(-6px);
    border-color: rgba(9, 79, 183, .28);
    box-shadow: 0 24px 54px rgba(16, 42, 75, .13);
}

/* a coloured rail down the leading edge, one accent per step */
.hp_story::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: linear-gradient(to bottom, #094fb7, #31bae6);
    z-index: 2;
}

.hp_story:nth-of-type(2)::before { background: linear-gradient(to bottom, #21738c, #31bae6); }
.hp_story:nth-of-type(3)::before { background: linear-gradient(to bottom, #f0812d, #f5a623); }
.hp_story:nth-of-type(4)::before { background: linear-gradient(to bottom, #16a64a, #31bae6); }

/* Alternate which side the mock sits on. Driven by an explicit class rather
   than :nth-child, because the section head is also a child of .container and
   silently shifts the parity. */
.hp_story--flip .hp_story_copy {
    order: 2;
}

.hp_story_copy {
    position: relative;
    padding: 40px 34px;
}

/* a soft wash behind the copy so the two halves of the card read apart */
.hp_story_copy::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(9, 79, 183, .07) 0%, transparent 70%);
    pointer-events: none;
}

.hp_story:nth-of-type(2) .hp_story_copy::after { background: radial-gradient(circle, rgba(33, 115, 140, .08) 0%, transparent 70%); }
.hp_story:nth-of-type(3) .hp_story_copy::after { background: radial-gradient(circle, rgba(240, 129, 45, .08) 0%, transparent 70%); }
.hp_story:nth-of-type(4) .hp_story_copy::after { background: radial-gradient(circle, rgba(22, 166, 74, .08) 0%, transparent 70%); }

.hp_story_copy > * {
    position: relative;
    z-index: 1;
}

/* both halves share the card's white ground, so the row reads as one surface */
.hp_story > .col-lg-7 {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 30px 24px;
    background: #fff;
}

.hp_story_step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #094fb7, #31bae6);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(9, 79, 183, .28), 0 0 0 6px rgba(9, 79, 183, .07);
}

/* one accent per step, so a reader can tell the four apart at a glance */
.hp_story:nth-of-type(2) .hp_story_step { background: linear-gradient(135deg, #21738c, #31bae6); box-shadow: 0 8px 20px rgba(33, 115, 140, .28), 0 0 0 6px rgba(33, 115, 140, .07); }
.hp_story:nth-of-type(3) .hp_story_step { background: linear-gradient(135deg, #f0812d, #f5a623); box-shadow: 0 8px 20px rgba(240, 129, 45, .28), 0 0 0 6px rgba(240, 129, 45, .07); }
.hp_story:nth-of-type(4) .hp_story_step { background: linear-gradient(135deg, #16a64a, #31bae6); box-shadow: 0 8px 20px rgba(22, 166, 74, .28), 0 0 0 6px rgba(22, 166, 74, .07); }

.hp_story_copy .hp_story_title {
    margin-bottom: 14px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.3;
    color: #102A4B;
}

/* a short rule under the title ties it to the step badge above */
.hp_story_copy .hp_story_title::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: 14px;
    border-radius: 3px;
    background: linear-gradient(90deg, #094fb7, #31bae6);
}

.hp_story_body {
    margin-bottom: 18px;
    font-size: 15.5px;
    line-height: 1.8;
    color: #5e6162;
}

.hp_story_points {
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
}

.hp_story_points li {
    position: relative;
    padding: 10px 14px 10px 40px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(9, 79, 183, .035);
    font-size: 14.5px;
    line-height: 1.6;
    color: #333;
    transition: background .2s ease, transform .2s ease;
}

.hp_story_points li:hover {
    background: rgba(9, 79, 183, .07);
    transform: translateX(3px);
}

/* the tick sits in its own circle, so each point reads as a discrete item */
.hp_story_points li i {
    position: absolute;
    top: 11px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(22, 166, 74, .14);
    font-size: 10px;
    color: #16a64a;
}

/* module links under each story, separated from the copy by a hairline so the
   card reads as content above and navigation below */
.hp_story_modules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px dashed #e2e9f2;
}

.hp_story_modules a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 13px;
    border: 1px solid #dde5ef;
    border-radius: 100px;
    background: #f7fbff;
    color: #094fb7;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.hp_story_modules a:hover,
.hp_story_modules a:focus-visible {
    border-color: #094fb7;
    background: #094fb7;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* --- Mock stage -------------------------------------------------------- */

/* The mocks are fluid layouts drawn for a wide column. Render at a fixed
   design width and scale the whole thing down; the scale is computed from the
   column at runtime, and the stage height is derived from it, because a
   transform does not affect layout. */
.hp_story_stage {
    --hp-mock-w: 920px;
    --hp-mock-s: .6;
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    flex: 1 1 auto;
}

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

.hp_story_mock .mock-figure {
    margin: 0;
}

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

.hp_story_mock .mock {
    box-shadow: 0 22px 50px rgba(16, 42, 75, .18), 0 3px 10px rgba(16, 42, 75, .08);
}

/* fade the bottom only when the mock is taller than the stage allows */
.hp_story_stage.is-clipped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 84px;
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 1;
}

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

.hp_platform_footer {
    margin-top: 60px;
    padding: 30px 32px;
    border-radius: 18px;
    background: linear-gradient(120deg, #102A4B 0%, #16506b 55%, #21738c 100%);
    box-shadow: 0 18px 44px rgba(16, 42, 75, .26);
}

.hp_platform_footer_text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: #fff;
}

.hp_platform_footer_text span {
    display: block;
    margin-top: 6px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .82);
}

.hp_platform_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 26px;
    border-radius: 10px;
    background: #fff;
    color: #102A4B;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease;
}

.hp_platform_btn:hover,
.hp_platform_btn:focus-visible {
    color: #102A4B;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.hp_platform_btn i {
    font-size: 13px;
    transition: transform .25s ease;
}

.hp_platform_btn:hover i {
    transform: translateX(4px);
}

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

@media (max-width: 991px) {
    .hp_platform { padding: 56px 0 62px; }
    .hp_platform_head .hp_platform_title { font-size: 29px; }
    .hp_story { margin-top: 44px; }
    /* the rail runs along the top edge once the halves stack */
    .hp_story::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 5px; }
    /* stack in reading order: copy above its mock on every row */
    .hp_story--flip .hp_story_copy { order: 0; }
    .hp_story_copy { padding: 32px 24px 26px; }
    .hp_story > .col-lg-7 { padding: 24px 20px 28px; }
    .hp_story_stage { --hp-mock-w: 820px; }
    .hp_platform_footer { text-align: center; }
    .hp_platform_footer_text { margin-bottom: 18px; }
}

@media (max-width: 767px) {
    .hp_platform_head .hp_platform_title { font-size: 25px; }

    /* 34px pills are under the 44px touch-target guidance used elsewhere */
    .hp_story_modules { gap: 10px; }
    .hp_story_modules a {
        min-height: 44px;
        padding: 10px 16px;
    }
    .hp_platform_lead { font-size: 15.5px; }
    .hp_story_copy .hp_story_title { font-size: 22px; }
    .hp_story_stage { --hp-mock-w: 640px; }
    .hp_platform_footer { padding: 24px 20px; }
}

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

@media (prefers-reduced-motion: reduce) {
    .hp_platform_btn,
    .hp_platform_btn i,
    .hp_story_modules a { transition: none; }
}