/* Scoped, text-based homepage product walkthrough. No video, images, or layout shifts. */
.hero-demo {
    --demo-duration: 5400ms;
    --demo-ink: #ecfff1;
    --demo-muted: #a6c3b1;
    --demo-line: rgba(192, 242, 209, .18);
    position: relative;
    isolation: isolate;
    width: min(450px, 100%);
    height: 466px;
    margin: 36px auto 0;
    padding-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(185, 247, 206, .38);
    border-radius: 27px;
    background: radial-gradient(circle at 75% 14%, rgba(43, 155, 103, .19), transparent 45%), linear-gradient(155deg, #10392b, #071c18 73%);
    box-shadow: 0 31px 75px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .15);
    color: var(--demo-ink);
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
}
.hero-demo *, .hero-demo *::before, .hero-demo *::after { box-sizing: border-box; }
.hero-demo::before {
    position: absolute;
    z-index: -1;
    inset: 36px -80px auto auto;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 201, 113, .15), transparent 68%);
    content: "";
    pointer-events: none;
}
.hero-demo-screen { position: relative; height: 340px; overflow: hidden; }
.hero-demo-scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 13px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.98);
    filter: blur(5px);
    transition: opacity .24s ease, transform .28s ease, filter .18s ease, visibility .24s;
}
.hero-demo[data-step="1"] [data-scene="1"],
.hero-demo[data-step="2"] [data-scene="2"],
.hero-demo[data-step="3"] [data-scene="3"],
.hero-demo[data-step="4"] [data-scene="4"],
.hero-demo[data-step="5"] [data-scene="5"],
.hero-demo[data-step="6"] [data-scene="6"] {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    transition: opacity .26s ease, transform .31s cubic-bezier(.2,.7,.2,1), filter .22s ease, visibility 0s;
}
.hero-demo-ui {
    position: relative;
    width: min(330px, 100%);
    min-height: 248px;
    padding: 21px;
    border: 1px solid rgba(195, 242, 210, .27);
    border-radius: 18px;
    background: linear-gradient(154deg, rgba(240, 255, 245, .14), rgba(237, 255, 245, .065));
    box-shadow: 0 20px 42px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .12);
}
.hero-demo-ui-top {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b9ddc5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
}
.hero-demo-ui-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(129, 233, 162, .32);
    border-radius: 8px;
    background: rgba(42, 207, 104, .16);
    color: #9bf0b4;
    font-size: 15px;
    line-height: 1;
}
.hero-demo-ui-top b { margin-left: auto; color: #74a987; font-size: 10px; font-variant-numeric: tabular-nums; }
.hero-demo-ui-title { margin: 16px 0; font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.hero-demo-ui-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 41px;
    margin: 8px 0;
    padding: 7px 11px;
    border: 1px solid rgba(174, 234, 193, .18);
    border-radius: 10px;
    background: rgba(2, 21, 16, .46);
    gap: 8px;
}
.hero-demo-ui-field small { color: #9dbdab; font-size: 10px; }
.hero-demo-ui-field strong { overflow: hidden; font-size: 11px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.hero-demo-ui-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    min-width: 143px;
    margin: 16px 0 0 auto;
    padding: 8px 10px;
    border-radius: 8px;
    background: linear-gradient(115deg, #13ad50, #24c978);
    box-shadow: 0 8px 20px rgba(24, 195, 91, .18);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    gap: 12px;
}
.hero-demo-ui-action span { font-size: 15px; line-height: .7; }
.hero-demo-ui-hint { margin-top: 17px; color: #a7dfb9; font-size: 11px; font-weight: 700; }
.hero-demo-ui-hint span { margin-right: 5px; color: #58db8b; }
.hero-demo-ui-item {
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    padding: 11px;
    border: 1px solid rgba(174, 234, 193, .19);
    border-radius: 10px;
    background: rgba(2, 21, 16, .48);
    font-size: 11px;
    font-weight: 800;
    gap: 6px;
}
.hero-demo-ui-item small { display: block; margin-top: 8px; color: #a6c5b0; font-size: 10px; font-weight: 500; }
.hero-demo-ui-total { display: flex; justify-content: space-between; padding: 14px 2px 0; color: #b4d3bf; font-size: 11px; }
.hero-demo-ui-total strong { color: #f2fff5; font-size: 12px; }
.hero-demo-focus {
    position: absolute;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(120, 240, 167, .58);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 0 9px rgba(54, 208, 116, .07), 0 0 28px rgba(63, 235, 135, .18);
}
.hero-demo-focus--one { top: 165px; right: 26px; }
.hero-demo-focus--two { top: 165px; right: 26px; }
.hero-demo-focus--three { top: 195px; right: 42px; }
.hero-demo-paper {
    width: min(250px, 86%);
    height: 277px;
    padding: 23px 20px;
    border: 1px solid #e4eee6;
    border-radius: 6px;
    background: #fcfffc;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .3), 0 0 0 8px rgba(219, 250, 230, .055);
    color: #163b28;
}
.hero-demo-paper-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #d9e8dd; }
.hero-demo-paper-head span { font-size: 14px; font-weight: 900; letter-spacing: .07em; }
.hero-demo-paper-head b { color: #628a6d; font-size: 8px; }
.hero-demo-paper-parties { display: flex; gap: 10px; padding: 20px 0 28px; }
.hero-demo-paper-parties span { flex: 1; color: #74917c; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.hero-demo-paper-parties strong { display: block; margin-top: 5px; color: #284b34; font-size: 10px; letter-spacing: 0; }
.hero-demo-paper-line, .hero-demo-paper-total { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
.hero-demo-paper-line { padding: 13px 0; border-top: 1px solid #d9e8dd; border-bottom: 1px solid #d9e8dd; color: #46614c; font-size: 9px; }
.hero-demo-paper-total { padding-top: 17px; font-size: 11px; font-weight: 900; }
.hero-demo-paper-total strong { color: #0d9d4e; font-size: 14px; }
.hero-demo-preview-tag {
    position: absolute;
    right: 22px;
    bottom: 32px;
    padding: 9px 11px;
    border: 1px solid rgba(132, 232, 167, .45);
    border-radius: 9px;
    background: #164d32;
    box-shadow: 0 13px 25px rgba(0, 0, 0, .25);
    font-size: 10px;
    font-weight: 800;
}
.hero-demo-preview-tag span { margin-left: 5px; color: #7beca9; }
.hero-demo-ui--payment { text-align: left; }
.hero-demo-payment-amount { margin: 23px 0 5px; font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.hero-demo-payment-label { color: #a6c3b1; font-size: 10px; }
.hero-demo-payment-flow { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: #d5f3de; font-size: 9px; font-weight: 800; }
.hero-demo-payment-flow i { flex: 1; height: 1px; background: #51ca7f; }
.hero-demo-payment-confirm { width: fit-content; margin-top: 18px; padding: 7px 10px; border: 1px solid rgba(113, 229, 152, .3); border-radius: 7px; background: rgba(38, 184, 96, .17); color: #a4f0bb; font-size: 10px; font-weight: 900; }
.hero-demo-chart-value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.hero-demo-chart-value small { flex-basis: 100%; color: #a8c9b3; font-size: 10px; }
.hero-demo-chart-value strong { font-size: 31px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hero-demo-chart-value span { color: #77e49f; font-size: 10px; font-weight: 900; }
.hero-demo-chart-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 100px; gap: 8px; margin-top: 12px; border-bottom: 1px solid rgba(190, 238, 207, .28); }
.hero-demo-chart-bars i { flex: 1; height: 40%; border-radius: 5px 5px 0 0; background: linear-gradient(0deg, #139a53, #5bea9e); transform-origin: bottom; }
.hero-demo-chart-bars i:nth-child(2) { height: 59%; }
.hero-demo-chart-bars i:nth-child(3) { height: 45%; }
.hero-demo-chart-bars i:nth-child(4) { height: 78%; }
.hero-demo-chart-bars i:nth-child(5) { height: 63%; }
.hero-demo-chart-bars i:nth-child(6) { height: 94%; }
.hero-demo-chart-bars i:nth-child(7) { height: 81%; }
.hero-demo-chart-axis { display: flex; justify-content: space-between; margin-top: 6px; color: #83a994; font-size: 9px; }
.hero-demo-foot { position: relative; height: 112px; padding: 15px 19px 12px; border-top: 1px solid var(--demo-line); }
.hero-demo-copy { position: relative; height: 61px; overflow: hidden; }
.hero-demo-caption { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(5px); filter: blur(3px); transition: opacity .18s ease, transform .2s ease, filter .12s ease, visibility .18s; }
.hero-demo-caption strong { display: block; color: #e9f9ee; font-size: 13px; font-weight: 900; line-height: 1.18; }
.hero-demo-caption span { display: block; margin-top: 5px; color: #a9c9b4; font-size: 10px; line-height: 1.25; }
.hero-demo[data-step="1"] [data-caption="1"], .hero-demo[data-step="2"] [data-caption="2"], .hero-demo[data-step="3"] [data-caption="3"], .hero-demo[data-step="4"] [data-caption="4"], .hero-demo[data-step="5"] [data-caption="5"], .hero-demo[data-step="6"] [data-caption="6"] { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .21s ease, transform .24s ease, filter .2s ease, visibility 0s; }
.hero-demo-counter { position: absolute; right: 53px; bottom: 12px; display: flex; gap: 4px; color: #86e6ab; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hero-demo-counter span:last-child { color: #83a993; }
.hero-demo-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin: 14px 91px 0 0; }
.hero-demo-toggle { position: absolute; right: 15px; bottom: 6px; display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid rgba(159, 225, 181, .36); border-radius: 8px; background: rgba(68, 155, 103, .15); color: #d6f7e1; font: inherit; font-size: 13px; cursor: pointer; }
.hero-demo-toggle[hidden] { display: none !important; }
.hero-demo-toggle:hover { background: rgba(68, 155, 103, .27); }
.hero-demo-toggle:focus-visible { outline: 2px solid #8ce7ab; outline-offset: 2px; }
.hero-demo-progress > span { position: relative; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(159, 212, 176, .23); }
.hero-demo-progress > span::before { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #29c96c, #a2efc6); content: ""; transform: scaleX(0); transform-origin: left; }
.hero-demo:not([data-playing="true"]) .hero-demo-progress > span:first-child::before { transform: scaleX(1); }
.hero-demo[data-step="2"] .hero-demo-progress > span:nth-child(-n+1)::before,
.hero-demo[data-step="3"] .hero-demo-progress > span:nth-child(-n+2)::before,
.hero-demo[data-step="4"] .hero-demo-progress > span:nth-child(-n+3)::before,
.hero-demo[data-step="5"] .hero-demo-progress > span:nth-child(-n+4)::before,
.hero-demo[data-step="6"] .hero-demo-progress > span:nth-child(-n+5)::before { transform: scaleX(1); }
.hero-demo[data-playing="true"][data-step="1"] .hero-demo-progress > span:nth-child(1)::before,
.hero-demo[data-playing="true"][data-step="2"] .hero-demo-progress > span:nth-child(2)::before,
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-progress > span:nth-child(3)::before,
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-progress > span:nth-child(4)::before,
.hero-demo[data-playing="true"][data-step="5"] .hero-demo-progress > span:nth-child(5)::before,
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-progress > span:nth-child(6)::before { animation: hero-demo-fill var(--demo-duration) linear forwards; }
.hero-demo[data-paused="true"] *, .hero-demo[data-paused="true"] *::before, .hero-demo[data-paused="true"] *::after { animation-play-state: paused !important; }
@keyframes hero-demo-fill { to { transform: scaleX(1); } }
@keyframes hero-demo-reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes hero-demo-focus { 10% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 55%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes hero-demo-paper-in { from { opacity: 0; transform: translateY(22px) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes hero-demo-bar { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
.hero-demo[data-playing="true"][data-step="1"] [data-scene="1"] .hero-demo-ui-field,
.hero-demo[data-playing="true"][data-step="2"] [data-scene="2"] .hero-demo-ui-field,
.hero-demo[data-playing="true"][data-step="3"] [data-scene="3"] .hero-demo-ui-item { animation: hero-demo-reveal .55s both; }
.hero-demo[data-playing="true"][data-step="1"] [data-scene="1"] .hero-demo-ui-field:nth-of-type(4),
.hero-demo[data-playing="true"][data-step="2"] [data-scene="2"] .hero-demo-ui-field:nth-of-type(4) { animation-delay: .45s; }
.hero-demo[data-playing="true"][data-step="1"] .hero-demo-focus--one,
.hero-demo[data-playing="true"][data-step="2"] .hero-demo-focus--two,
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-focus--three { animation: hero-demo-focus 2.5s .6s both; }
.hero-demo[data-playing="true"][data-step="3"] [data-scene="3"] .hero-demo-ui-total { animation: hero-demo-reveal .55s .5s both; }
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-paper { animation: hero-demo-paper-in .7s both; }
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-preview-tag { animation: hero-demo-reveal .5s .55s both; }
.hero-demo[data-playing="true"][data-step="5"] .hero-demo-payment-confirm { animation: hero-demo-reveal .55s .65s both; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i { animation: hero-demo-bar .75s .35s both; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i:nth-child(2n) { animation-delay: .5s; }
/* Preserve the homepage CTA order: on mobile the demo remains below it. */
@media (min-width: 1200px) {
    #box-2.home-hero > .container { max-width: 1350px; }
    .hero-content { display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; column-gap: 26px; width: min(1240px, 100%); padding: 48px 43px; }
    .hero-content > [class*="col-"] { width: 100%; max-width: 100%; padding-right: 0; padding-left: 0; grid-column: 1; }
    .hero-content > [class*="col-"]:first-child { grid-row: 1; justify-content: flex-start !important; }
    .hero-content > [class*="col-"]:nth-child(2) { grid-row: 2; }
    .hero-content > [class*="col-"]:nth-child(3) { grid-row: 3; justify-content: flex-start !important; }
    .hero-content .hero-title { max-width: 620px; font-size: clamp(2.75rem, 4vw, 4.05rem) !important; text-align: left; }
    html[lang="es"] .hero-content .hero-title { font-size: clamp(2.55rem, 3.6vw, 3.7rem) !important; }
    .hero-content .hero-copy { margin-left: 0 !important; text-align: left; }
    .hero-content .hero-actions { margin-left: 0; }
    .hero-demo { grid-column: 2; grid-row: 1 / 4; margin: 0 auto; }
}
@media (max-width: 1199.98px) { .hero-demo { flex: 0 1 450px; } }
@media (max-width: 767.98px) {
    .hero-demo { height: 418px; margin-top: 26px; border-radius: 22px; }
    .hero-demo-screen { height: 292px; }
    .hero-demo-scene { padding: 8px; }
    .hero-demo-ui { width: min(306px, 100%); min-height: 245px; padding: 17px; }
    .hero-demo-paper { height: 255px; }
    .hero-demo-foot { height: 112px; padding: 14px 14px 12px; }
    .hero-demo-counter { right: 48px; }
    .hero-demo-toggle { right: 11px; }
}
@media (max-width: 360px) {
    .hero-demo { height: 418px; }
    .hero-demo-screen { height: 292px; }
    .hero-demo-ui { min-height: 245px; padding: 14px; }
    .hero-demo-ui-title { margin: 12px 0; font-size: 16px; }
    .hero-demo-ui-field { min-height: 37px; }
    .hero-demo-ui-action { margin-top: 10px; }
    .hero-demo-paper { height: 255px; padding: 17px; }
    .hero-demo-paper-parties { padding: 16px 0 20px; }
    .hero-demo-chart-value { margin-top: 10px; }
    .hero-demo-chart-value strong { font-size: 25px; }
    .hero-demo-chart-bars { height: 75px; margin-top: 7px; }
    .hero-demo-caption strong { font-size: 11px; }
    .hero-demo-caption span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-demo *, .hero-demo *::before, .hero-demo *::after { animation: none !important; transition: none !important; }
    .hero-demo[data-step="1"] .hero-demo-progress > span:first-child::before { transform: scaleX(1); }
}

/* A small, anchored product story: the cursor, confirmation and document
   always belong to their own mock interface rather than the screen viewport. */
.hero-demo {
    background:
        radial-gradient(circle at 72% 17%, rgba(51, 183, 111, .15), transparent 43%),
        radial-gradient(circle at 13% 75%, rgba(85, 176, 117, .08), transparent 37%),
        linear-gradient(153deg, #123d2e 0%, #0a2c23 39%, #071a18 100%);
    box-shadow: 0 33px 72px rgba(2, 22, 15, .4), 0 0 0 1px rgba(100, 235, 149, .11), inset 0 1px rgba(255, 255, 255, .16);
}
.hero-demo-screen::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 11% 23%, rgba(160, 255, 190, .5) 0 1px, transparent 2px),
        radial-gradient(circle at 81% 70%, rgba(153, 255, 188, .42) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 16%, rgba(127, 228, 167, .3) 0 1px, transparent 2px);
    content: "";
    pointer-events: none;
}
.hero-demo-ui {
    width: min(414px, 100%);
    min-height: 251px;
    background: linear-gradient(149deg, rgba(220, 255, 233, .135), rgba(235, 255, 240, .047) 72%);
    box-shadow: 0 25px 55px rgba(0, 12, 8, .37), 0 0 37px rgba(35, 193, 93, .07), inset 0 1px rgba(255, 255, 255, .13);
    backdrop-filter: blur(9px);
}
.hero-demo-ui-action,
.hero-demo-ai-accept,
.hero-demo-payment-action,
.hero-demo-client-option { position: relative; }
.hero-demo-ui-action,
.hero-demo-ai-accept,
.hero-demo-payment-action { overflow: visible; }
.hero-demo-pointer {
    position: absolute;
    z-index: 3;
    right: 14px;
    bottom: -17px;
    width: 14px;
    height: 20px;
    background: #f4fff6;
    clip-path: polygon(0 0, 0 100%, 4px 14px, 12px 17px);
    filter: drop-shadow(1px 2px 1px rgba(0,0,0,.65));
    opacity: 0;
    pointer-events: none;
}
.hero-demo-ui-action::after,
.hero-demo-ai-accept::after,
.hero-demo-payment-action::after,
.hero-demo-client-option::after {
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(118, 247, 170, .64);
    border-radius: inherit;
    content: "";
    opacity: 0;
    pointer-events: none;
}
.hero-demo-saved {
    width: fit-content;
    margin: 13px 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgba(116, 230, 157, .31);
    border-radius: 7px;
    background: rgba(35, 177, 88, .12);
    color: #b2f4c7;
    font-size: 10px;
    font-weight: 800;
    opacity: 0;
}
.hero-demo-client-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 71px;
    margin-top: 21px;
    padding: 9px;
    border: 1px solid rgba(165, 234, 191, .25);
    border-radius: 11px;
    background: rgba(3, 31, 22, .64);
    text-align: left;
}
.hero-demo-avatar {
    display: grid;
    flex: 0 0 35px;
    place-items: center;
    height: 35px;
    border-radius: 10px;
    background: linear-gradient(145deg, #18b967, #3be189);
    color: #063421;
    font-size: 14px;
    font-weight: 900;
}
.hero-demo-client-option > span:nth-child(2) { min-width: 0; }
.hero-demo-client-option strong { display: block; font-size: 12px; }
.hero-demo-client-option small { display: block; overflow: hidden; margin-top: 4px; color: #a5c8b1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hero-demo-client-check {
    display: grid;
    flex: 0 0 23px;
    place-items: center;
    height: 23px;
    margin-left: auto;
    border-radius: 50%;
    background: #22c76c;
    color: #063621;
    font-weight: 900;
}
.hero-demo-client-option + .hero-demo-ui-hint { margin-top: 16px; }
.hero-demo-ui--ai { height: 264px; }
.hero-demo-ai-icon {
    border-color: rgba(241, 181, 255, .58);
    background: linear-gradient(135deg, rgba(93, 215, 233, .35), rgba(221, 99, 230, .31), rgba(244, 184, 98, .27));
    color: white;
    box-shadow: 0 0 19px rgba(183, 127, 236, .21);
}
.hero-demo-ai-suggestion {
    position: absolute;
    top: 91px;
    right: 20px;
    left: 20px;
    display: grid;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: linear-gradient(#102a26, #102a26) padding-box,
        linear-gradient(120deg, #51d5bf, #b295f1 48%, #e7acda 75%, #efc875) border-box;
    box-shadow: 0 10px 26px rgba(0, 10, 16, .22), 0 0 24px rgba(159, 111, 224, .14);
    font-size: 10px;
    font-weight: 800;
}
.hero-demo-ai-label {
    width: fit-content;
    background: linear-gradient(95deg, #6ee5cf, #c6b6ff 54%, #f8b9de);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 9px;
    letter-spacing: .03em;
}
.hero-demo-ai-suggestion > span:nth-child(2) { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; }
.hero-demo-ai-suggestion > span:nth-child(2) strong { white-space: nowrap; }
.hero-demo-ai-accept {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    min-width: 112px;
    margin-left: auto;
    padding: 5px 8px;
    border-radius: 6px;
    background: linear-gradient(108deg, #1daf70, #36ca88);
    color: white;
    font-size: 9px;
    font-weight: 900;
    gap: 11px;
}
.hero-demo-ui--ai .hero-demo-ui-item {
    position: absolute;
    top: 103px;
    right: 20px;
    left: 20px;
    opacity: 0;
}
.hero-demo-ui--ai .hero-demo-ui-total {
    position: absolute;
    top: 176px;
    right: 20px;
    left: 20px;
    opacity: 0;
}
.hero-demo-paper {
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 24px 54px rgba(0, 10, 7, .42), 0 0 0 8px rgba(219, 250, 230, .055);
}
.hero-demo-paper::before {
    position: absolute;
    z-index: 3;
    inset: -20% -55%;
    background: linear-gradient(110deg, transparent 38%, rgba(112, 228, 210, .26) 47%, rgba(196, 165, 249, .38) 52%, transparent 62%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translateX(-95%) rotate(-7deg);
}
.hero-demo-scene[data-scene="4"]::before {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(340px, 86%);
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(100, 236, 184, .25), rgba(151, 137, 240, .16) 42%, transparent 71%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.7);
}
.hero-demo-preview-tag {
    z-index: 2;
    right: 2px;
    bottom: 21px;
    max-width: 143px;
    white-space: nowrap;
}
.hero-demo-ui--payment { height: 251px; }
.hero-demo-payment-action,
.hero-demo-payment-confirm {
    position: absolute;
    right: 19px;
    bottom: 24px;
    left: 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 34px;
    margin: 0;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 900;
}
.hero-demo-payment-action {
    background: linear-gradient(108deg, #14a653, #25cb78);
    box-shadow: 0 9px 20px rgba(13, 146, 67, .16);
    color: white;
}
.hero-demo-payment-confirm {
    width: auto;
    border: 1px solid rgba(107, 224, 147, .3);
    background: rgba(35, 177, 88, .15);
    color: #b4f5c9;
    opacity: 0;
}
.hero-demo-analytics-metrics { display: flex; gap: 8px; margin-top: 16px; }
.hero-demo-analytics-metrics > div {
    flex: 1;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(166, 231, 184, .18);
    border-radius: 8px;
    background: rgba(1, 23, 16, .33);
}
.hero-demo-analytics-metrics small { display: block; color: #9cc6ab; font-size: 9px; }
.hero-demo-analytics-metrics strong { display: block; margin-top: 4px; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-demo-analytics-metrics > div:last-child strong { color: #88eeb0; }
.hero-demo-ui--analytics .hero-demo-chart-bars { height: 91px; margin-top: 9px; }
.hero-demo-ui--analytics .hero-demo-chart-bars i {
    position: relative;
    overflow: hidden;
    background: linear-gradient(0deg, #2c9d65, #69dca0);
}
.hero-demo-ui--analytics .hero-demo-chart-bars i::after {
    position: absolute;
    inset: 32% 0 0;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(0deg, #137044, #23bb70);
    content: "";
}
.hero-demo-chart-legend { display: flex; justify-content: center; gap: 15px; margin-top: 7px; color: #a7c6b0; font-size: 9px; }
.hero-demo-chart-legend span::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 2px; background: #69dca0; content: ""; }
.hero-demo-chart-legend span:last-child::before { background: #23bb70; }
.hero-demo-foot { padding-right: 19px; }
.hero-demo-copy { height: 64px; }
.hero-demo-progress { margin-right: 106px; }
.hero-demo-counter { right: 67px; bottom: 14px; }
.hero-demo-toggle {
    right: 8px;
    bottom: 5px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 15px;
}
/* Micro-timing leaves a long still hold after each meaningful action. */
@keyframes demo-enter { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes demo-pointer { 0%, 12% { opacity: 0; transform: translate(16px, 14px) scale(.86); } 31%, 53% { opacity: 1; transform: translate(0, 0) scale(1); } 62% { opacity: 1; transform: translate(0, 2px) scale(.93); } 82%, 100% { opacity: 0; transform: translate(0, 2px); } }
@keyframes demo-tap { 0%, 42% { opacity: 0; transform: scale(.72); } 54% { opacity: .8; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.17); } }
@keyframes demo-show-late { 0%, 55% { opacity: 0; transform: translateY(7px); } 68%, 100% { opacity: 1; transform: none; } }
@keyframes demo-choice { 0%, 47% { border-color: rgba(165, 234, 191, .25); background: rgba(3, 31, 22, .64); } 61%, 100% { border-color: #66dea0; background: rgba(18, 101, 62, .45); } }
@keyframes demo-suggest-away { 0%, 49% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: translateY(-7px) scale(.97); } }
@keyframes demo-item-in { 0%, 57% { opacity: 0; transform: translateY(11px); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes demo-payment-button { 0%, 51% { opacity: 1; transform: none; } 64%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes demo-paper-build { 0%, 18% { opacity: 0; transform: translateY(7px); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes demo-soft-rise { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
.hero-demo[data-playing="true"][data-step="1"] [data-scene="1"] .hero-demo-ui-action,
.hero-demo[data-playing="true"][data-step="2"] [data-scene="2"] .hero-demo-client-option,
.hero-demo[data-playing="true"][data-step="3"] [data-scene="3"] .hero-demo-ai-suggestion,
.hero-demo[data-playing="true"][data-step="5"] [data-scene="5"] .hero-demo-payment-action {
    animation: demo-enter .46s .6s backwards;
}
.hero-demo[data-playing="true"][data-step="1"] [data-scene="1"] .hero-demo-pointer,
.hero-demo[data-playing="true"][data-step="2"] [data-scene="2"] .hero-demo-pointer,
.hero-demo[data-playing="true"][data-step="3"] [data-scene="3"] .hero-demo-pointer,
.hero-demo[data-playing="true"][data-step="5"] [data-scene="5"] .hero-demo-pointer {
    animation: demo-pointer var(--demo-duration) both;
}
.hero-demo[data-playing="true"][data-step="1"] [data-scene="1"] .hero-demo-ui-action::after,
.hero-demo[data-playing="true"][data-step="2"] [data-scene="2"] .hero-demo-client-option::after,
.hero-demo[data-playing="true"][data-step="3"] [data-scene="3"] .hero-demo-ai-accept::after,
.hero-demo[data-playing="true"][data-step="5"] [data-scene="5"] .hero-demo-payment-action::after {
    animation: demo-tap var(--demo-duration) both;
}
.hero-demo[data-playing="true"][data-step="1"] [data-scene="1"] .hero-demo-saved,
.hero-demo[data-playing="true"][data-step="2"] [data-scene="2"] .hero-demo-ui-hint,
.hero-demo[data-playing="true"][data-step="5"] [data-scene="5"] .hero-demo-payment-confirm {
    animation: demo-show-late var(--demo-duration) both;
}
.hero-demo[data-playing="true"][data-step="2"] [data-scene="2"] .hero-demo-client-option { animation: demo-choice var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="2"] [data-scene="2"] .hero-demo-client-check { animation: demo-show-late var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="3"] [data-scene="3"] .hero-demo-ai-suggestion { animation: demo-suggest-away var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="3"] [data-scene="3"] .hero-demo-ui-item,
.hero-demo[data-playing="true"][data-step="3"] [data-scene="3"] .hero-demo-ui-total { animation: demo-item-in var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-paper-parties,
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-paper-line,
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-paper-total { animation: demo-paper-build var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-paper-line { animation-delay: .25s; }
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-paper-total { animation-delay: .6s; }
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-preview-tag { animation: demo-soft-rise .5s 2.35s both; }
.hero-demo[data-playing="true"][data-step="5"] [data-scene="5"] .hero-demo-payment-action { animation: demo-payment-button var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-analytics-metrics > div { animation: demo-soft-rise .55s .25s both; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-analytics-metrics > div:last-child { animation-delay: .55s; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i { animation: hero-demo-bar .72s both; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i:nth-child(1) { animation-delay: .42s; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i:nth-child(2) { animation-delay: .55s; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i:nth-child(3) { animation-delay: .68s; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i:nth-child(4) { animation-delay: .81s; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i:nth-child(5) { animation-delay: .94s; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i:nth-child(6) { animation-delay: 1.07s; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-bars i:nth-child(7) { animation-delay: 1.2s; }
.hero-demo[data-playing="true"][data-step="6"] .hero-demo-chart-legend { animation: demo-soft-rise .5s 1.3s both; }
@media (min-width: 1200px) {
    .hero-demo { height: 478px; }
    .hero-demo-screen { height: 323px; }
    .hero-demo-scene { padding: 10px; }
    .hero-demo-paper { height: 270px; }
}
@media (max-width: 767.98px) {
    .hero-demo-ui--ai { height: 254px; }
    .hero-demo-ui--analytics .hero-demo-chart-bars { height: 72px; }
    .hero-demo-preview-tag { right: 2px; bottom: 10px; }
    .hero-demo-counter { right: 64px; }
    .hero-demo-toggle { right: 5px; }
}
@media (max-width: 360px) {
    .hero-demo-ai-suggestion { top: 75px; right: 14px; left: 14px; }
    .hero-demo-ui--ai .hero-demo-ui-item { top: 92px; right: 14px; left: 14px; }
    .hero-demo-ui--ai .hero-demo-ui-total { top: 161px; right: 14px; left: 14px; }
    .hero-demo-analytics-metrics strong { font-size: 14px; }
    .hero-demo-preview-tag { padding: 7px 8px; font-size: 9px; }
}

/* The story belongs to the hero, rather than to a second panel inside it. */
@media (min-width: 992px) {
    .hero-wrap,
    #box-2.home-hero,
    #box-2.home-hero > .container { min-height: 750px; }
}
#box-2.home-hero > .container { padding-top: 92px; }
.hero-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, .96fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: clamp(30px, 5vw, 82px);
    width: min(1190px, 100%);
    max-width: none;
    margin: 0 auto !important;
    padding: 24px 32px 38px;
    border: 0;
    background: none;
    box-shadow: none;
}
.hero-content > div:first-child,
.hero-content > div:nth-child(2) {
    grid-column: 1;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}
.hero-content > div:first-child { align-self: end; }
.hero-content > div:nth-child(2) { align-self: start; }
.hero-content .hero-title { margin-bottom: 32px !important; text-align: left; }
.home-hero .hero-actions {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.hero-actions .web-app-cta { width: min(242px, 100%); margin: 0 0 30px; }
.home-hero .hero-actions p { text-align: left !important; }
.home-hero .hero-actions p:first-of-type { margin-top: 0 !important; }
.hero-content .hero-demo {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: min(488px, 100%);
    height: 478px;
    margin: 0;
    padding-top: 4px;
    border-color: rgba(192, 243, 215, .3);
    background: radial-gradient(circle at 78% 17%, rgba(75, 205, 147, .11), transparent 45%), rgba(5, 35, 28, .9);
    box-shadow: 0 35px 85px rgba(0, 12, 13, .29), inset 0 1px rgba(255, 255, 255, .1);
    backdrop-filter: blur(16px);
}
.hero-content .hero-demo .hero-demo-screen { height: 360px; }
.hero-demo-scene { padding-block: 0 46px; }
.hero-demo-ui {
    border-color: rgba(195, 242, 210, .17);
    background: linear-gradient(149deg, rgba(220, 255, 233, .1), rgba(235, 255, 240, .035) 72%);
    box-shadow: 0 18px 36px rgba(0, 12, 8, .17), inset 0 1px rgba(255, 255, 255, .08);
}
.home-intro-band {
    position: relative;
    padding: 32px 20px 68px;
    background: #092e25;
    color: #e4f3e9;
    text-align: center;
}
.home-intro-band::before,
.home-intro-band::after {
    position: absolute;
    right: 0;
    left: 0;
    height: 60px;
    content: "";
    pointer-events: none;
}
.home-intro-band::before { top: -60px; background: linear-gradient(transparent, #092e25); }
.home-intro-band::after { bottom: 0; background: linear-gradient(#092e25, #f1f8f4); }
.home-intro-band .container { max-width: 900px; }
.home-intro-band .hero-copy {
    max-width: 780px;
    margin: 0 auto 17px !important;
    color: #daeae0 !important;
    font-size: 15px !important;
    line-height: 1.65;
}
.home-intro-band .hero-download-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.home-intro-band .hero-download-badges > .row { width: auto !important; margin: 0 !important; }
.home-intro-band .hero-download-badges .row > div { width: auto !important; padding: 0 !important; }
.home-intro-band .hero-download-badges .btn { display: block; filter: drop-shadow(0 5px 13px rgba(0, 0, 0, .22)); }

/* A specific request replaces the low-value saved-client detour. */
.hero-demo-ui--prompt,
.hero-demo-ui--draft { height: 266px; }
.hero-demo-ui--prompt .hero-demo-ui-title,
.hero-demo-ui--draft .hero-demo-ui-title { margin: 12px 0; font-size: 16px; }
.hero-demo-prompt {
    position: relative;
    min-height: 123px;
    padding: 11px;
    border: 1px solid rgba(156, 222, 193, .27);
    border-radius: 12px;
    background: rgba(1, 22, 21, .5);
}
.hero-demo-prompt-text { display: block; max-width: 95%; color: #e4f9eb; font-size: 11px; line-height: 1.45; }
.hero-demo-prompt-send,
.hero-demo-create {
    position: absolute;
    isolation: isolate;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 104px;
    padding: 7px 10px;
    border-radius: 7px;
    background: linear-gradient(120deg, #159d67, #28cc87);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    gap: 12px;
}
.hero-demo-editor-alternative { margin-top: 11px; color: #a9c9bc; font-size: 10px; }
.hero-demo-draft-card {
    padding: 4px 10px;
    border: 1px solid rgba(152, 229, 190, .22);
    border-radius: 11px;
    background: rgba(2, 27, 23, .48);
}
.hero-demo-draft-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 30px; }
.hero-demo-draft-row + .hero-demo-draft-row { border-top: 1px solid rgba(190, 237, 208, .13); }
.hero-demo-draft-row small { color: #a9cbbc; font-size: 10px; }
.hero-demo-draft-row strong { max-width: 69%; color: #f2fff6; font-size: 11px; text-align: right; }
.hero-demo-create { right: 20px; bottom: 17px; min-width: 125px; }
.hero-demo-generation {
    position: absolute;
    z-index: 4;
    inset: 48px 17px 11px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 13px;
    background: radial-gradient(circle at 50% 40%, rgba(59, 195, 170, .16), transparent 62%),
        linear-gradient(148deg, #092b25, #0b2530 57%, #12233b) padding-box,
        linear-gradient(120deg, #60e8c4, #9b95f0 49%, #f2b1d5 76%, #6ce6a5) border-box;
    box-shadow: 0 15px 31px rgba(0, 12, 16, .35), 0 0 26px rgba(135, 120, 242, .17);
    opacity: 0;
    pointer-events: none;
}
.hero-demo-generation-aura {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 224, 243, .32), rgba(131, 116, 231, .17) 44%, transparent 70%);
    opacity: 0;
    transform: translateX(-50%) scale(.55);
}
.hero-demo-generation-orbit {
    position: absolute;
    top: 24px;
    left: 50%;
    width: 116px;
    height: 116px;
    transform: translateX(-50%);
}
.hero-demo-generation-ring--outer,
.hero-demo-generation-ring--inner {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.hero-demo-generation-ring--outer {
    inset: 5px;
    background: conic-gradient(from 30deg, transparent 0 15deg, #86f4cc 17deg 72deg, transparent 76deg 120deg, #a9a2ff 123deg 174deg, transparent 177deg 220deg, #f5b9dd 225deg 273deg, transparent 276deg 320deg, #70e8de 325deg 350deg, transparent 353deg);
}
.hero-demo-generation-ring--inner {
    inset: 18px;
    background: conic-gradient(from 10deg, #b0f3e5 0 38deg, transparent 41deg 98deg, #a596f7 101deg 146deg, transparent 150deg 226deg, #f4c4df 229deg 276deg, transparent 280deg);
}
.hero-demo-generation-glint--one,
.hero-demo-generation-glint--two {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f9fffd;
    box-shadow: 0 0 7px 3px rgba(147, 233, 240, .67);
    opacity: 0;
}
.hero-demo-generation-glint--one { top: 11px; right: 24px; }
.hero-demo-generation-glint--two { right: 9px; bottom: 27px; background: #fad4f0; }
.hero-demo-generation-mote {
    position: absolute;
    z-index: 2;
    top: 82px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #99f6d0;
    box-shadow: 0 0 11px 2px rgba(140, 235, 208, .49);
    opacity: 0;
}
.hero-demo-generation-mote--one { --mote-x: -99px; --mote-y: 26px; }
.hero-demo-generation-mote--two { --mote-x: 92px; --mote-y: -19px; background: #c3b3ff; }
.hero-demo-generation-mote--three { --mote-x: -62px; --mote-y: -43px; background: #f6bde2; }
.hero-demo-generation-receipt {
    position: absolute;
    top: 34px;
    left: 50%;
    width: 51px;
    height: 66px;
    padding: 8px 6px;
    border: 1px solid rgba(248, 255, 253, .86);
    border-radius: 3px;
    background: linear-gradient(153deg, rgba(243, 255, 253, .9), rgba(208, 239, 243, .7));
    box-shadow: 0 0 14px rgba(163, 230, 239, .39);
    opacity: 0;
    transform: translateX(-50%) scale(.48) rotate(-8deg);
}
.hero-demo-generation-receipt-head,
.hero-demo-generation-receipt-line,
.hero-demo-generation-receipt-total {
    display: block;
    height: 3px;
    border-radius: 5px;
    background: #489978;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}
.hero-demo-generation-receipt-head { width: 66%; height: 5px; margin-bottom: 9px; background: #1b9c6f; }
.hero-demo-generation-receipt-line { width: 100%; margin-top: 6px; background: #81afa9; }
.hero-demo-generation-receipt-line:nth-child(3) { width: 76%; }
.hero-demo-generation-receipt-total { width: 56%; height: 4px; margin-top: 10px; margin-left: auto; background: #238c73; transform-origin: right; }
.hero-demo-generation strong {
    position: absolute;
    right: 8px;
    bottom: 14px;
    left: 8px;
    color: #f4fff8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 9px rgba(0, 12, 20, .7);
}
.hero-demo-generation::after {
    position: absolute;
    z-index: 3;
    top: 24px;
    left: 50%;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 255, 252, .69), rgba(138, 231, 223, .29) 34%, transparent 70%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(.35);
}
.hero-demo-prompt-send::after,
.hero-demo-create::after {
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(157, 238, 192, .68);
    border-radius: inherit;
    content: "";
    opacity: 0;
    pointer-events: none;
}
.hero-demo-prompt-send::before,
.hero-demo-create::before {
    position: absolute;
    z-index: -1;
    inset: -11px;
    border-radius: 14px;
    background: conic-gradient(from 145deg, rgba(116, 232, 213, .58), rgba(169, 146, 244, .64), rgba(252, 175, 216, .5), rgba(116, 232, 213, .58));
    filter: blur(10px);
    content: "";
    opacity: 0;
    pointer-events: none;
}
.hero-demo-draft-card { position: relative; }
.hero-demo-draft-card::after {
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(102, 232, 212, .75), rgba(176, 144, 238, .7), rgba(239, 177, 214, .65)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    content: "";
    opacity: 0;
    pointer-events: none;
}
.hero-demo-payment-confirm { position: absolute; }
.hero-demo-payment-confirm::after {
    position: absolute;
    inset: -5px;
    border: 2px solid #8af0b0;
    border-radius: 11px;
    box-shadow: 0 0 18px rgba(104, 232, 149, .32);
    content: "";
    opacity: 0;
    pointer-events: none;
}

/* Event-local flecks: never a page-wide or continuously moving particle layer. */
.hero-demo-scene::after {
    position: absolute;
    z-index: 4;
    width: 78px;
    height: 66px;
    background: radial-gradient(circle, #a5f5c2 0 2px, transparent 3px) 4px 9px / 40px 42px no-repeat,
        radial-gradient(circle, #67e2a5 0 2px, transparent 3px) 37px 2px / 34px 38px no-repeat,
        radial-gradient(circle, #b7edff 0 1.5px, transparent 3px) 13px 34px / 34px 29px no-repeat;
    content: "";
    opacity: 0;
    pointer-events: none;
}
.hero-demo-scene[data-scene="1"]::after { right: 24px; bottom: 39px; }
.hero-demo-scene[data-scene="2"]::after { right: 29px; bottom: 35px; }
.hero-demo-scene[data-scene="3"]::after { right: 24px; bottom: 32px; }
.hero-demo-scene[data-scene="4"]::after { right: 38px; bottom: 38px; }
.hero-demo-scene[data-scene="5"]::after { right: 30px; bottom: 34px; }
.hero-demo-scene[data-scene="6"]::after { right: 42px; bottom: 57px; }
.hero-demo-scene[data-scene="2"]::after,
.hero-demo-scene[data-scene="3"]::after {
    background: radial-gradient(circle, #c4aaff 0 2px, transparent 3px) 4px 9px / 40px 42px no-repeat,
        radial-gradient(circle, #7debd9 0 2px, transparent 3px) 37px 2px / 34px 38px no-repeat,
        radial-gradient(circle, #ffd3a0 0 1.5px, transparent 3px) 13px 34px / 34px 29px no-repeat;
}
.hero-demo-scene[data-scene="6"]::after {
    background: radial-gradient(circle, #83cfff 0 2px, transparent 3px) 4px 9px / 40px 42px no-repeat,
        radial-gradient(circle, #6fe0c6 0 2px, transparent 3px) 37px 2px / 34px 38px no-repeat,
        radial-gradient(circle, #b2ebfd 0 1.5px, transparent 3px) 13px 34px / 34px 29px no-repeat;
}
@keyframes demo-event-flecks { 0%, 34%, 67%, 100% { opacity: 0; transform: translate(0, 9px) scale(.68); } 48% { opacity: .8; transform: translate(0, 0) scale(1); } 62% { opacity: 0; transform: translate(3px, -14px) scale(1.08); } }
@keyframes demo-prompt-in { 0%, 12% { opacity: 0; transform: translateY(5px); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes demo-action-out { 0%, 56% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes demo-ai-signal { 0%, 40%, 80%, 100% { opacity: 0; transform: scale(.78); } 53% { opacity: .9; transform: scale(1); } 69% { opacity: 0; transform: scale(1.35); } }
@keyframes demo-ai-draft-border { 0% { opacity: 0; } 14% { opacity: .9; } 35%, 100% { opacity: 0; } }
/* One bounded 2.3-second forge: gather invoice details, assemble a receipt,
   then contract into the document reveal in the following scene. */
@keyframes demo-generating { 0%, 55% { opacity: 0; transform: translateY(8px) scale(.96); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-2px) scale(.89); } }
@keyframes demo-forge-aura { 0%, 56% { opacity: 0; transform: translateX(-50%) scale(.55); } 64% { opacity: .9; transform: translateX(-50%) scale(1); } 78% { opacity: .4; transform: translateX(-50%) scale(1.14); } 92% { opacity: .62; transform: translateX(-50%) scale(.85); } 100% { opacity: 0; transform: translateX(-50%) scale(.35); } }
@keyframes demo-forge-mote { 0%, 56% { opacity: 0; transform: translate(var(--mote-x), var(--mote-y)) scale(.55) rotate(-25deg); } 61% { opacity: 1; } 70% { opacity: 1; transform: translate(-3px, 0) scale(1.1) rotate(75deg); } 76%, 100% { opacity: 0; transform: translate(-3px, 0) scale(.2) rotate(130deg); } }
@keyframes demo-forge-ring-outer { 0%, 57% { opacity: 0; transform: rotate(-75deg) scale(.76); } 65% { opacity: .94; } 87% { opacity: 1; transform: rotate(164deg) scale(1); } 96% { opacity: .75; transform: rotate(210deg) scale(.84); } 100% { opacity: 0; transform: rotate(230deg) scale(.58); } }
@keyframes demo-forge-ring-inner { 0%, 62% { opacity: 0; transform: rotate(85deg) scale(.78); } 69% { opacity: .84; } 90% { opacity: .93; transform: rotate(-169deg) scale(1); } 100% { opacity: 0; transform: rotate(-190deg) scale(.56); } }
@keyframes demo-forge-glint { 0%, 64%, 100% { opacity: 0; transform: scale(.4); } 70%, 75% { opacity: 1; transform: scale(1.3); } 83% { opacity: 0; transform: scale(.55); } }
@keyframes demo-forge-receipt { 0%, 67% { opacity: 0; transform: translateX(-50%) scale(.48) rotate(-8deg); } 75% { opacity: .95; transform: translateX(-50%) scale(1.05) rotate(2deg); } 87% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } 95% { opacity: 1; transform: translateX(-50%) scale(.94) rotate(0); } 100% { opacity: 0; transform: translateX(-50%) scale(.74) rotate(0); } }
@keyframes demo-forge-line { 0%, 72% { opacity: 0; transform: scaleX(0); } 82%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes demo-forge-line-two { 0%, 77% { opacity: 0; transform: scaleX(0); } 86%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes demo-forge-line-three { 0%, 82% { opacity: 0; transform: scaleX(0); } 90%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes demo-forge-line-total { 0%, 87% { opacity: 0; transform: scaleX(0); } 94%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes demo-forge-flash { 0%, 88% { opacity: 0; transform: translateX(-50%) scale(.35); } 96% { opacity: .9; transform: translateX(-50%) scale(1.55); } 100% { opacity: 0; transform: translateX(-50%) scale(1.75); } }
@keyframes demo-invoice-aurora { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.54); } 28% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 70%, 100% { opacity: .12; transform: translate(-50%, -50%) scale(1.36); } }
@keyframes demo-invoice-materialize { 0% { opacity: 0; filter: blur(9px) brightness(1.4); transform: translateY(23px) scale(.88) rotate(-2deg); box-shadow: 0 0 47px rgba(138, 135, 238, .48); } 55% { opacity: 1; filter: blur(0); transform: translateY(-5px) scale(1.025) rotate(.5deg); box-shadow: 0 0 38px rgba(116, 236, 184, .36); } 78% { transform: translateY(1px) scale(.995); } 100% { opacity: 1; filter: none; transform: none; box-shadow: 0 24px 54px rgba(0, 10, 7, .42), 0 0 0 8px rgba(219, 250, 230, .055); } }
@keyframes demo-invoice-sweep { 0%, 12% { opacity: 0; transform: translateX(-95%) rotate(-7deg); } 31% { opacity: 1; } 72% { opacity: .7; transform: translateX(95%) rotate(-7deg); } 100% { opacity: 0; transform: translateX(115%) rotate(-7deg); } }
@keyframes demo-payment-pulse { 0%, 58%, 100% { opacity: 0; transform: scale(.94); } 70% { opacity: .82; transform: scale(1); } 87% { opacity: 0; transform: scale(1.09); } }
.hero-demo[data-playing="true"] .hero-demo-scene::after { animation: demo-event-flecks var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="2"] .hero-demo-prompt-text { animation: demo-prompt-in var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="2"] .hero-demo-prompt-send::before,
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-create::before { animation: demo-ai-signal var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-draft-card::after { animation: demo-ai-draft-border var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation { animation: demo-generating var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-aura { animation: demo-forge-aura var(--demo-duration) ease-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-mote { animation: demo-forge-mote var(--demo-duration) ease-in-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-mote--two { animation-delay: .12s; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-mote--three { animation-delay: .24s; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-ring--outer { animation: demo-forge-ring-outer var(--demo-duration) ease-in-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-ring--inner { animation: demo-forge-ring-inner var(--demo-duration) ease-in-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-glint--one { animation: demo-forge-glint var(--demo-duration) ease-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-glint--two { animation: demo-forge-glint var(--demo-duration) .45s ease-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-receipt { animation: demo-forge-receipt var(--demo-duration) ease-in-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-receipt-head { animation: demo-forge-line var(--demo-duration) ease-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-receipt-line:nth-child(2) { animation: demo-forge-line-two var(--demo-duration) ease-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-receipt-line:nth-child(3) { animation: demo-forge-line-three var(--demo-duration) ease-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation-receipt-total { animation: demo-forge-line-total var(--demo-duration) ease-out both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-generation::after { animation: demo-forge-flash var(--demo-duration) ease-out both; }
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-scene[data-scene="4"]::before { animation: demo-invoice-aurora 2s ease-out both; }
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-paper { animation: demo-invoice-materialize 1.45s cubic-bezier(.19,.75,.21,1) both; }
.hero-demo[data-playing="true"][data-step="4"] .hero-demo-paper::before { animation: demo-invoice-sweep 1.65s .24s ease-out both; }
.hero-demo[data-playing="true"][data-step="5"] .hero-demo-payment-confirm::after { animation: demo-payment-pulse var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="2"] .hero-demo-prompt-send .hero-demo-pointer,
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-create .hero-demo-pointer { animation: demo-pointer var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="2"] .hero-demo-prompt-send::after,
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-create::after { animation: demo-tap var(--demo-duration) both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-draft-row:nth-child(1) { animation: demo-soft-rise .38s .25s both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-draft-row:nth-child(2) { animation: demo-soft-rise .38s .48s both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-draft-row:nth-child(3) { animation: demo-soft-rise .38s .71s both; }
.hero-demo[data-playing="true"][data-step="3"] .hero-demo-create { animation: demo-action-out var(--demo-duration) both; }
@media (max-width: 991.98px) {
    .hero-content { column-gap: 24px; padding: 36px 16px 30px; }
    .hero-content .hero-title { font-size: clamp(2.45rem, 5vw, 3.6rem) !important; }
}
@media (max-width: 767.98px) {
    #box-2.home-hero > .container { padding-top: 86px; }
    .hero-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0; padding: 25px 10px 18px; }
    .hero-content > div:first-child,
    .hero-content > div:nth-child(2),
    .hero-content .hero-demo { grid-column: 1; grid-row: auto; }
    .hero-content .hero-title { margin-bottom: 23px !important; text-align: center; }
    .hero-actions .web-app-cta { width: min(300px, 100%); margin: 0 auto 16px; }
    .home-hero .hero-actions p { text-align: center !important; }
    .hero-content .hero-demo { width: min(488px, 100%); height: 472px; margin: 22px auto 0; }
    .hero-content .hero-demo .hero-demo-screen { height: 356px; }
    .home-intro-band { padding: 27px 18px 66px; }
}
@media (max-width: 360px) {
    .hero-content { padding-right: 0; padding-left: 0; }
    .hero-content .hero-demo { height: 458px; padding-top: 0; }
    .hero-content .hero-demo .hero-demo-screen { height: 346px; }
    .hero-demo-scene { padding-block: 0 56px; }
    .hero-demo-ui--prompt, .hero-demo-ui--draft { height: 265px; }
    .hero-demo-prompt-text { font-size: 10px; }
    .hero-demo-draft-row strong { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-demo-scene::after { display: none; }
    .hero-demo-prompt-text,
    .hero-demo-draft-row,
    .hero-demo-create { animation: none !important; }
    .hero-demo-create { opacity: 1; }
}