.data-ai-page {
    --dai-navy: #0b1930;
    --dai-navy-soft: #142746;
    --dai-blue: #176df5;
    --dai-cyan: #21c4d6;
    --dai-mint: #37dbc0;
    --dai-ink: #111d31;
    --dai-muted: #66758b;
    --dai-line: #dce4ee;
    --dai-surface: #f3f6fa;
    overflow: hidden;
    background: #fff;
    color: var(--dai-ink);
}

.data-ai-anchor {
    scroll-margin-top: 92px;
}

.data-ai-page * {
    box-sizing: border-box;
}

.data-ai-page .fas {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.data-ai-page .far {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}

/* The legacy site animation script can be interrupted by unrelated page widgets. */
.data-ai-page .b_motion .b_item {
    opacity: 1 !important;
    transform: none !important;
}

.dai-container {
    width: min(1420px, 90%);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.dai-kicker {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 25px;
    color: var(--dai-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
}

.dai-kicker::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dai-blue), var(--dai-cyan));
    box-shadow: 0 0 0 6px rgba(23, 109, 245, .09);
    content: "";
    flex: 0 0 auto;
}

.dai-hero {
    position: relative;
    padding: 150px 0 120px;
    background:
        linear-gradient(180deg, rgba(238, 246, 255, .78), rgba(255, 255, 255, .97) 68%),
        linear-gradient(90deg, #eef6ff, #f8fbff);
}

.dai-hero::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(16, 55, 103, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 55, 103, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 86%);
    mask-image: linear-gradient(to bottom, #000, transparent 86%);
    content: "";
}

.dai-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

.dai-orb-a {
    width: 480px;
    height: 480px;
    right: -170px;
    top: -240px;
    background: radial-gradient(circle, rgba(33, 196, 214, .2), rgba(33, 196, 214, 0) 68%);
}

.dai-orb-b {
    width: 420px;
    height: 420px;
    left: -200px;
    bottom: -210px;
    background: radial-gradient(circle, rgba(23, 109, 245, .14), rgba(23, 109, 245, 0) 70%);
}

.dai-hero-copy {
    max-width: 1420px;
}

.dai-hero h1 {
    margin: 0;
    color: var(--dai-ink);
    font-size: clamp(42px, 3.6vw, 52px);
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: 1.12;
}

.dai-hero h1 strong {
    color: var(--dai-blue);
    font-weight: 800;
}

.dai-lead {
    max-width: 820px;
    margin-top: 34px;
    color: #506078;
    font-size: clamp(18px, 1.45vw, 22px);
    font-weight: 400;
    line-height: 1.72;
    word-break: keep-all;
}

.dai-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 78px;
    border: 1px solid rgba(189, 205, 224, .72);
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 26px 80px rgba(24, 61, 107, .1);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.dai-flow li {
    position: relative;
    min-width: 0;
    padding: 29px 24px 27px;
}

.dai-flow li:not(:last-child) {
    border-right: 1px solid var(--dai-line);
}

.dai-flow li:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -7px;
    width: 14px;
    height: 14px;
    border-top: 1px solid var(--dai-line);
    border-right: 1px solid var(--dai-line);
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
    content: "";
}

.dai-flow-number {
    display: block;
    margin-bottom: 19px;
    color: #9aacc1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.dai-flow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 13px;
    background: #ecf4ff;
    color: var(--dai-blue);
    font-size: 17px;
}

.dai-flow li:nth-child(2) .dai-flow-icon,
.dai-flow li:nth-child(4) .dai-flow-icon {
    background: #ebfbf8;
    color: #10a88f;
}

.dai-flow strong,
.dai-flow small {
    display: block;
    word-break: keep-all;
}

.dai-flow strong {
    color: var(--dai-ink);
    font-size: 16px;
    font-weight: 750;
}

.dai-flow small {
    margin-top: 7px;
    color: #758398;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.dai-section {
    padding: 150px 0;
}

.dai-split {
    display: grid;
    grid-template-columns: minmax(360px, .82fr) minmax(550px, 1.18fr);
    align-items: center;
    gap: clamp(65px, 7vw, 120px);
}

.dai-section h2,
.dai-loop-section h2 {
    color: var(--dai-ink);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.18;
    word-break: keep-all;
}

.dai-body {
    margin-top: 29px;
    color: var(--dai-muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.78;
    word-break: keep-all;
}

.dai-feature-list {
    display: grid;
    gap: 0;
    margin-top: 45px;
    border-top: 1px solid var(--dai-line);
}

.dai-feature-list li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 8px;
    padding: 21px 0;
    border-bottom: 1px solid var(--dai-line);
}

.dai-feature-list li > span {
    padding-top: 2px;
    color: var(--dai-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.dai-feature-list strong {
    display: block;
    color: var(--dai-ink);
    font-size: 17px;
    font-weight: 750;
}

.dai-feature-list p {
    margin-top: 5px;
    color: #7c8999;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    word-break: keep-all;
}

.dai-data-section {
    background: #fff;
}

.dai-retail-visual {
    position: relative;
    overflow: hidden;
    padding: 31px;
    border: 1px solid #d8e1eb;
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 6%, rgba(23, 109, 245, .12), transparent 32%),
        linear-gradient(145deg, #f8fafc, #edf2f7);
    box-shadow: 0 34px 90px rgba(16, 44, 79, .15);
}

.dai-retail-visual-head {
    position: relative;
    z-index: 2;
    max-width: 480px;
    margin-bottom: 25px;
}

.dai-retail-visual-head > span {
    display: block;
    color: var(--dai-blue);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.dai-retail-visual-head > strong {
    display: block;
    margin-top: 8px;
    color: #17263d;
    font-size: 21px;
    font-weight: 780;
    letter-spacing: -.025em;
    line-height: 1.35;
    word-break: keep-all;
}

.dai-retail-visual-head > p {
    margin-top: 7px;
    color: #68778b;
    font-size: 12px;
    line-height: 1.55;
    word-break: keep-all;
}

.dai-retail-tag-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.dai-retail-tag {
    position: relative;
    aspect-ratio: 580 / 310;
    overflow: hidden;
    margin: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .64);
}

.dai-retail-tag-main {
    grid-column: 1 / -1;
}

.dai-retail-tag-bezel {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 13px rgba(21, 31, 45, .18));
    transform: translateY(-23.28%);
}

.dai-retail-tag-screen {
    position: absolute;
    z-index: 2;
    top: 14.55%;
    left: 14.35%;
    display: block;
    width: 74.65%;
    height: 71.6%;
    border-radius: 2px;
    object-fit: fill;
    image-rendering: auto;
}

.dai-retail-tag-small .dai-retail-tag-screen {
    border-radius: 1px;
}

.dai-data-console {
    position: relative;
}

.dai-data-console::before,
.dai-data-console::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.dai-data-console::before {
    z-index: -1;
    width: 380px;
    height: 380px;
    right: -85px;
    top: -95px;
    background: #e7f5ff;
}

.dai-data-console::after {
    z-index: -1;
    width: 220px;
    height: 220px;
    left: -70px;
    bottom: -70px;
    border: 42px solid #eefbf8;
}

.dai-console-card {
    overflow: hidden;
    border: 1px solid #d9e2ec;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 34px 90px rgba(16, 44, 79, .16);
}

.dai-window-bar,
.dai-translator-top,
.dai-agent-topbar,
.dai-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dai-window-bar {
    height: 72px;
    padding: 0 25px;
    border-bottom: 1px solid #e6ebf1;
}

.dai-window-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #1d2939;
    font-size: 14px;
    font-weight: 750;
}

.dai-app-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--dai-navy);
    color: #fff;
    font-size: 17px;
    font-weight: 850;
    font-style: italic;
}

.dai-status,
.dai-edge-badge,
.dai-agent-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.dai-status {
    padding: 8px 11px;
    background: #eafaf6;
    color: #0c957f;
}

.dai-status i,
.dai-edge-badge i,
.dai-agent-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(18, 173, 146, .12);
}

.dai-console-body {
    display: grid;
    grid-template-columns: 175px minmax(0, 1fr);
    min-height: 540px;
}

.dai-record-list {
    padding: 24px 13px;
    border-right: 1px solid #e5ebf2;
    background: #f7f9fc;
}

.dai-record-list > p {
    padding: 0 9px 15px;
    color: #66758a;
    font-size: 11px;
    font-weight: 750;
}

.dai-record {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 10px;
    border-radius: 12px;
}

.dai-record.active {
    background: #e9f2ff;
}

.dai-product-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 9px;
    background: #fff;
    color: var(--dai-blue);
    font-size: 14px;
}

.dai-record strong,
.dai-record small {
    display: block;
    white-space: nowrap;
}

.dai-record strong {
    color: #24334b;
    font-size: 10px;
    font-weight: 750;
}

.dai-record small {
    margin-top: 4px;
    color: #7e8da2;
    font-size: 9px;
    font-weight: 400;
}

.dai-record.muted {
    margin-top: 10px;
}

.dai-record.muted > span {
    width: 35px;
    height: 35px;
    border-radius: 9px;
    background: #e9eef4;
}

.dai-record.muted > div {
    width: 65px;
    height: 8px;
    border-radius: 4px;
    background: #e1e7ef;
}

.dai-record-detail {
    padding: 29px;
}

.dai-product-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.dai-product-heading span,
.dai-product-heading p {
    color: #8996a7;
    font-size: 10px;
    font-weight: 600;
}

.dai-product-heading h3 {
    margin: 7px 0 5px;
    color: #14233a;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.035em;
}

.dai-product-heading .dai-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 9px;
    border: 1px solid #bde9df;
    border-radius: 7px;
    color: #0d9b82;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
}

.dai-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

.dai-field-grid > div {
    padding: 14px 16px;
    border: 1px solid #e1e7ee;
    border-radius: 11px;
    background: #fbfcfe;
}

.dai-field-grid span,
.dai-field-grid strong {
    display: block;
}

.dai-field-grid span {
    color: #8a97a8;
    font-size: 9px;
    font-weight: 600;
}

.dai-field-grid strong {
    margin-top: 6px;
    color: #253650;
    font-size: 12px;
    font-weight: 750;
}

.dai-language-table {
    margin-top: 17px;
    overflow: hidden;
    border: 1px solid #e0e6ed;
    border-radius: 12px;
}

.dai-table-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #f7f9fc;
}

.dai-table-title span {
    color: #42516a;
    font-size: 10px;
    font-weight: 750;
}

.dai-table-title small {
    color: #8794a6;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.dai-language-table > div:not(.dai-table-title) {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 14px;
    align-items: center;
    min-height: 47px;
    padding: 8px 14px;
    border-top: 1px solid #edf0f4;
}

.dai-language-table b {
    color: var(--dai-blue);
    font-size: 9px;
    font-weight: 850;
}

.dai-language-table span {
    overflow: hidden;
    color: #33445d;
    font-size: 10px;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dai-language-table i {
    color: #1ab99f;
    font-size: 10px;
}

.dai-sync-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 17px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--dai-navy);
}

.dai-sync-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #64dbff;
    font-size: 13px;
}

.dai-sync-card small,
.dai-sync-card strong {
    display: block;
}

.dai-sync-card small {
    color: #8fa0b9;
    font-size: 8px;
    font-weight: 600;
}

.dai-sync-card strong {
    margin-top: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.dai-sync-wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
}

.dai-sync-wave i {
    width: 3px;
    border-radius: 2px;
    background: #38d8c1;
}

.dai-sync-wave i:nth-child(1) { height: 7px; }
.dai-sync-wave i:nth-child(2) { height: 13px; }
.dai-sync-wave i:nth-child(3) { height: 20px; }

.dai-translation-section {
    position: relative;
    background: var(--dai-navy);
}

.dai-translation-section::before {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(135, 182, 255, .16) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 45%, transparent);
    content: "";
}

.dai-translation-glow {
    position: absolute;
    top: -230px;
    right: -160px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 109, 245, .28), rgba(23, 109, 245, 0) 68%);
}

.dai-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(410px, .75fr);
    align-items: end;
    gap: clamp(60px, 8vw, 140px);
    margin-bottom: 75px;
}

.dai-section-head .dai-body {
    margin-top: 0;
}

.dai-section-head-light h2 {
    color: #fff;
}

.dai-section-head-light .dai-kicker {
    color: #65dfe5;
}

.dai-section-head-light .dai-kicker::before {
    background: #55e2d2;
    box-shadow: 0 0 0 6px rgba(85, 226, 210, .1);
}

.dai-section-head-light .dai-body {
    color: #a9b6c9;
}

.dai-inline-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.dai-inline-points li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: #dbe5f3;
    font-size: 12px;
    font-weight: 550;
}

.dai-inline-points li i {
    color: #54dac7;
    font-size: 9px;
}

.dai-translator-window {
    overflow: hidden;
    border: 1px solid rgba(139, 166, 202, .24);
    border-radius: 26px;
    background: rgba(17, 36, 64, .94);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .35);
}

.dai-translator-top {
    height: 78px;
    padding: 0 28px;
    border-bottom: 1px solid rgba(139, 166, 202, .18);
}

.dai-translator-top > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dai-ai-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--dai-blue), var(--dai-cyan));
    color: #fff;
    font-size: 14px;
    box-shadow: 0 7px 20px rgba(23, 109, 245, .25);
}

.dai-translator-top strong {
    color: #f7faff;
    font-size: 15px;
    font-weight: 750;
}

.dai-edge-badge {
    padding: 9px 12px;
    background: rgba(55, 219, 192, .11);
    color: #5be6cf;
}

.dai-translator-body {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) 100px minmax(460px, 1.35fr);
    align-items: stretch;
    gap: 24px;
    padding: 32px;
}

.dai-source-card,
.dai-results-card {
    border: 1px solid rgba(154, 179, 212, .2);
    border-radius: 18px;
    background: rgba(8, 23, 44, .72);
}

.dai-source-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.dai-card-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dai-card-label span {
    color: #8fa0b9;
    font-size: 11px;
    font-weight: 650;
}

.dai-card-label b {
    padding: 5px 7px;
    border-radius: 6px;
    background: rgba(69, 130, 255, .16);
    color: #75a6ff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
}

.dai-source-card > p {
    margin-top: 43px;
    color: #fff;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 720;
    letter-spacing: -.025em;
    line-height: 1.45;
    word-break: keep-all;
}

.dai-source-card > small {
    margin-top: 13px;
    color: #8190a6;
    font-size: 11px;
    font-weight: 450;
}

.dai-token-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 35px;
}

.dai-token-row span {
    padding: 7px 9px;
    border: 1px solid rgba(85, 226, 210, .24);
    border-radius: 7px;
    background: rgba(85, 226, 210, .07);
    color: #69dfd0;
    font-size: 9px;
    font-weight: 700;
}

.dai-ai-process {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 13px;
    position: relative;
}

.dai-ai-process::before,
.dai-ai-process::after {
    position: absolute;
    top: 50%;
    width: 29px;
    height: 1px;
    background: linear-gradient(90deg, rgba(87, 229, 211, .1), #54e0cf);
    content: "";
}

.dai-ai-process::before { left: -24px; }
.dai-ai-process::after { right: -24px; transform: rotate(180deg); }

.dai-process-core {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(91, 230, 207, .3);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(23, 109, 245, .26), rgba(55, 219, 192, .16));
    color: #6be3d2;
    font-size: 23px;
    box-shadow: 0 0 35px rgba(55, 219, 192, .13);
}

.dai-ai-process small {
    color: #768aa7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-align: center;
}

.dai-results-card {
    overflow: hidden;
}

.dai-results-card .dai-card-label {
    height: 51px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(154, 179, 212, .16);
}

.dai-results-card .dai-card-label b {
    background: rgba(55, 219, 192, .1);
    color: #57dfca;
}

.dai-result-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 20px;
    align-items: center;
    min-height: 57px;
    padding: 8px 18px;
    border-bottom: 1px solid rgba(154, 179, 212, .12);
}

.dai-result-row:last-child {
    border-bottom: 0;
}

.dai-result-row > b {
    color: #719ee9;
    font-size: 10px;
    font-weight: 850;
}

.dai-result-row p {
    color: #e8edf6;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.4;
}

.dai-result-row > i {
    color: #42d3bb;
    font-size: 11px;
}

.dai-live-translator {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(139, 166, 202, .28);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .35);
}

.dai-live-translator-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 0 28px;
    border-bottom: 1px solid #e2e8e4;
    background: #fff;
}

.dai-live-translator-head > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dai-live-translator-head strong {
    color: #17263d;
    font-size: 16px;
    font-weight: 750;
}

.dai-live-translator-head .dai-edge-badge {
    background: #eaf8f3;
    color: #0f8f68;
}

.dai-live-translator-frame {
    display: block;
    width: 100%;
    height: 342px;
    border: 0;
    background: #fff;
}

.dai-live-translator-note {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    margin: 0;
    padding: 12px 24px;
    border-top: 1px solid #e8ece9;
    background: #f8faf8;
    color: #6b786f;
    font-size: 12px;
    line-height: 1.5;
}

.dai-live-translator-note i {
    color: #15966c;
}

.dai-agent-section {
    background: #f5f7fa;
}

.dai-inline-points-dark li {
    border-color: #dce5ef;
    background: #fff;
    color: #4a5b72;
}

.dai-example-wrap {
    position: relative;
    padding-top: 17px;
}

.dai-example-label {
    position: absolute;
    z-index: 3;
    right: 22px;
    top: -1px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--dai-navy);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    box-shadow: 0 10px 24px rgba(11, 25, 48, .16);
}

.dai-agent-app {
    overflow: hidden;
    border: 1px solid #dce3ec;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 36px 100px rgba(22, 45, 77, .16);
}

.dai-agent-topbar {
    height: 76px;
    padding: 0 28px;
    border-bottom: 1px solid #e3e8ef;
    background: #fff;
}

.dai-agent-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dai-agent-brand strong {
    color: #15233a;
    font-size: 17px;
    font-weight: 780;
    letter-spacing: -.02em;
}

.dai-agent-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 750;
}

.dai-agent-actions span,
.dai-agent-actions b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
}

.dai-agent-actions span {
    border: 1px solid #d5dce6;
    background: #fff;
    color: #53637a;
}

.dai-agent-actions b {
    background: var(--dai-navy);
    color: #fff;
}

.dai-agent-grid {
    display: grid;
    grid-template-columns: 220px minmax(500px, 1.28fr) minmax(340px, .82fr);
    min-height: 680px;
}

.dai-task-panel,
.dai-preview-panel,
.dai-chat-panel {
    min-width: 0;
}

.dai-task-panel {
    padding: 24px 16px;
    border-right: 1px solid #e1e7ee;
    background: #fbfcfe;
}

.dai-panel-heading {
    height: 40px;
    color: #27364c;
    font-size: 13px;
    font-weight: 700;
}

.dai-task-panel > .dai-panel-heading {
    padding: 0 8px;
}

.dai-panel-heading i {
    color: #8090a4;
    font-size: 11px;
}

.dai-new-task {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin: 7px 0 14px;
    border: 1px dashed #a7b6ca;
    border-radius: 9px;
    color: #45556d;
    font-size: 12px;
    font-weight: 600;
}

.dai-new-task i {
    color: var(--dai-blue);
}

.dai-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    margin-bottom: 8px;
    padding: 13px 13px;
    border-radius: 12px;
}

.dai-task.active {
    background: #eaf1ff;
    box-shadow: inset 3px 0 0 var(--dai-blue);
}

.dai-task strong {
    color: #25344b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.dai-preview-panel {
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr) 46px;
    border-right: 1px solid #e1e7ee;
    background: #f8fafc;
}

.dai-preview-panel > .dai-panel-heading,
.dai-chat-panel > .dai-panel-heading {
    height: 64px;
    padding: 0 22px;
    border-bottom: 1px solid #e1e7ee;
    background: #fff;
}

.dai-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 38px 30px;
    background:
        linear-gradient(rgba(30, 74, 127, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 74, 127, .026) 1px, transparent 1px),
        #eef2f6;
    background-size: 24px 24px;
}

.dai-esl-device {
    position: relative;
    width: min(100%, 500px);
    padding: 11px 11px 15px;
    border: 1px solid #050607;
    border-radius: 20px;
    background: linear-gradient(145deg, #25282d, #101216);
    box-shadow: 0 28px 60px rgba(13, 25, 43, .3), inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.dai-esl-device::after {
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 31px;
    height: 2px;
    border-radius: 2px;
    background: #4a4d52;
    content: "";
    transform: translateX(-50%);
}

.dai-esl-screen {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr) 42px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid #050505;
    border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #fff, 0 2px 7px rgba(0, 0, 0, .45);
}

.dai-esl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 3px solid #111;
    background: #fff;
}

.dai-esl-header strong {
    color: #111;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
}

.dai-esl-header span {
    padding: 5px 9px 4px;
    border-radius: 2px;
    background: #f4d51f;
    color: #111;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
}

.dai-esl-content {
    position: relative;
    display: block;
    min-height: 0;
    padding: 16px 18px 14px;
}

.dai-esl-promo {
    display: inline-block;
    padding: 6px 10px 5px;
    border: 0;
    border-radius: 2px;
    background: #e51f1f;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .01em;
}

.dai-esl-main h4 {
    margin-top: 12px;
    color: #050505;
    font-size: clamp(23px, 1.9vw, 31px);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.08;
}

.dai-esl-main p {
    margin-top: 6px;
    color: #282828;
    font-size: 12px;
    font-weight: 700;
}

.dai-esl-main > small {
    display: block;
    margin-top: 12px;
    color: #4d4d4d;
    font-size: 11px;
    font-weight: 700;
}

.dai-esl-price {
    position: absolute;
    right: 18px;
    bottom: 13px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
    min-width: 0;
    line-height: 1;
}

.dai-esl-price > span {
    display: flex;
    align-items: flex-start;
}

.dai-esl-price small {
    padding-top: 11px;
    color: #e5352d;
    font-size: 15px;
    font-weight: 850;
}

.dai-esl-price strong {
    color: #e51f1f;
    font-size: clamp(45px, 3.7vw, 62px);
    font-weight: 900;
    letter-spacing: -.075em;
}

.dai-esl-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 7px 17px;
    border-top: 2px solid #111;
    background: #fff;
}

.dai-esl-footer small,
.dai-esl-footer b {
    color: #111;
    font-size: 9px;
    font-weight: 700;
}

.dai-esl-footer b {
    color: #111;
    letter-spacing: .06em;
}

.dai-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-top: 1px solid #e1e7ee;
    background: #fff;
    color: #77869a;
    font-size: 10px;
    font-weight: 600;
}

.dai-preview-meta b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #176df5;
    font-weight: 750;
}

.dai-preview-meta b i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.dai-chat-panel {
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr) 70px;
    background: #fff;
}

.dai-chat-model {
    padding: 6px 9px;
    border-radius: 7px;
    background: #eef4ff;
    color: #3775d4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
}

.dai-chat-body {
    overflow: hidden;
    padding: 22px 18px;
    background: #fbfcfe;
}

.dai-message {
    display: flex;
    max-width: 92%;
    margin-bottom: 18px;
}

.dai-message p {
    padding: 12px 14px;
    border-radius: 12px;
    color: #435168;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;
    word-break: keep-all;
}

.dai-message.user {
    align-items: flex-end;
    flex-direction: column;
    margin-left: auto;
}

.dai-message.user p {
    border-bottom-right-radius: 3px;
    background: #e8edf4;
}

.dai-message.ai {
    gap: 8px;
}

.dai-message.ai p {
    border: 1px solid #e5eaf0;
    border-bottom-left-radius: 3px;
    background: #fff;
}

.dai-chat-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--dai-blue), var(--dai-cyan));
    color: #fff;
    font-size: 10px;
}

.dai-chat-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 11px 13px;
    padding: 0 8px 0 14px;
    border: 1px solid #cfd7e2;
    border-radius: 10px;
    color: #a1acba;
    font-size: 10px;
    font-weight: 500;
}

.dai-chat-input b {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--dai-navy);
    color: #fff;
    font-size: 10px;
    font-weight: 750;
}

.dai-loop-section {
    position: relative;
    padding: 125px 0;
    background: #fff;
    text-align: center;
}

.dai-loop-copy {
    max-width: 840px;
    margin: 0 auto;
}

.dai-loop-copy .dai-kicker {
    justify-content: center;
}

.dai-loop-copy > p:last-child {
    max-width: 690px;
    margin: 25px auto 0;
    color: var(--dai-muted);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    word-break: keep-all;
}

.dai-loop {
    display: grid;
    grid-template-columns: repeat(7, auto);
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.5vw, 42px);
    margin-top: 65px;
}

.dai-loop > div {
    display: grid;
    grid-template-columns: auto 42px;
    grid-template-rows: 15px auto;
    align-items: center;
    gap: 4px 13px;
    min-width: 170px;
    padding: 22px 20px;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(25, 55, 91, .07);
    text-align: left;
}

.dai-loop > div > span {
    grid-column: 1;
    color: #91a0b3;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
}

.dai-loop > div > i {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #edf5ff;
    color: var(--dai-blue);
    font-size: 15px;
}

.dai-loop > div > strong {
    grid-column: 1;
    color: #21324a;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.dai-loop > i {
    color: #8fa0b6;
    font-size: 12px;
}

@media screen and (max-width: 1240px) {
    .dai-split {
        grid-template-columns: minmax(330px, .78fr) minmax(520px, 1.22fr);
        gap: 55px;
    }

    .dai-agent-grid {
        grid-template-columns: 190px minmax(430px, 1.18fr) minmax(310px, .82fr);
    }

    .dai-loop {
        gap: 14px;
    }

    .dai-loop > div {
        min-width: 150px;
        padding: 19px 16px;
    }
}

@media screen and (max-width: 1024px) {
    .dai-hero {
        padding: 120px 0 100px;
    }

    .dai-flow {
        grid-template-columns: repeat(6, 1fr);
    }

    .dai-flow li {
        grid-column: span 2;
    }

    .dai-flow li:nth-child(4),
    .dai-flow li:nth-child(5) {
        grid-column: span 3;
        border-top: 1px solid var(--dai-line);
    }

    .dai-flow li:nth-child(3) {
        border-right: 0;
    }

    .dai-flow li:nth-child(3)::after,
    .dai-flow li:nth-child(5)::after {
        display: none;
    }

    .dai-split,
    .dai-section-head {
        grid-template-columns: 1fr;
    }

    .dai-split {
        gap: 75px;
    }

    .dai-section-copy {
        max-width: 760px;
    }

    .dai-section-head {
        align-items: start;
        gap: 28px;
    }

    .dai-section-head > div:last-child {
        max-width: 760px;
    }

    .dai-translator-body {
        grid-template-columns: 1fr 75px 1.45fr;
        gap: 17px;
        padding: 24px;
    }

    .dai-agent-grid {
        grid-template-columns: 1.2fr .8fr;
        grid-template-rows: auto 640px;
    }

    .dai-task-panel {
        grid-column: 1 / 3;
        display: grid;
        grid-template-columns: 150px repeat(3, 1fr);
        gap: 8px;
        padding: 14px 18px;
        border-right: 0;
        border-bottom: 1px solid #e1e7ee;
    }

    .dai-task-panel > .dai-panel-heading {
        grid-column: 1;
        height: auto;
    }

    .dai-new-task {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }

    .dai-task {
        grid-row: 1 / 3;
        margin: 0;
    }

    .dai-loop {
        grid-template-columns: repeat(7, auto);
        gap: 8px;
    }

    .dai-loop > div {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        justify-items: center;
        min-width: 120px;
        text-align: center;
    }

    .dai-loop > div > span,
    .dai-loop > div > i,
    .dai-loop > div > strong {
        grid-column: auto;
        grid-row: auto;
    }

    .dai-loop > div > i {
        order: -1;
        margin-bottom: 7px;
    }
}

@media screen and (max-width: 760px) {
    .dai-container {
        width: 88%;
    }

    .dai-hero {
        padding: 85px 0 72px;
    }

    .dai-hero h1 {
        font-size: 36px;
        line-height: 1.2;
    }

    .dai-lead {
        margin-top: 25px;
        font-size: 16px;
        line-height: 1.65;
    }

    .dai-flow {
        display: block;
        margin-top: 48px;
        border-radius: 18px;
    }

    .dai-flow li {
        display: grid;
        grid-template-columns: 34px 44px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 12px;
        padding: 17px 18px;
        border-right: 0 !important;
        border-top: 1px solid var(--dai-line);
    }

    .dai-flow li:first-child {
        border-top: 0;
    }

    .dai-flow li::after {
        display: none;
    }

    .dai-flow-number {
        grid-row: 1 / 3;
        margin: 0;
    }

    .dai-flow-icon {
        grid-row: 1 / 3;
        margin: 0;
    }

    .dai-flow strong {
        align-self: end;
        font-size: 14px;
    }

    .dai-flow small {
        align-self: start;
        margin-top: 3px;
        font-size: 11px;
    }

    .dai-section {
        padding: 90px 0;
    }

    .dai-section h2,
    .dai-loop-section h2 {
        font-size: 32px;
    }

    .dai-body {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.7;
    }

    .dai-feature-list {
        margin-top: 33px;
    }

    .dai-feature-list li {
        padding: 17px 0;
    }

    .dai-feature-list strong {
        font-size: 15px;
    }

    .dai-retail-visual {
        padding: 22px;
        border-radius: 21px;
    }

    .dai-retail-visual-head {
        margin-bottom: 18px;
    }

    .dai-retail-visual-head > strong {
        font-size: 18px;
    }

    .dai-retail-tag-grid {
        gap: 9px;
    }

    .dai-feature-list p {
        font-size: 12px;
    }

    .dai-split {
        gap: 55px;
    }

    .dai-console-body {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .dai-record-list {
        display: none;
    }

    .dai-record-detail {
        padding: 21px 17px;
    }

    .dai-product-heading h3 {
        font-size: 18px;
    }

    .dai-language-table > div:not(.dai-table-title) {
        grid-template-columns: 38px minmax(0, 1fr) 14px;
        padding: 8px 10px;
    }

    .dai-language-table span {
        font-size: 9px;
    }

    .dai-section-head {
        margin-bottom: 48px;
    }

    .dai-inline-points {
        display: grid;
        justify-items: start;
        margin-top: 22px;
    }

    .dai-translator-top {
        height: 65px;
        padding: 0 17px;
    }

    .dai-translator-top strong {
        font-size: 12px;
    }

    .dai-edge-badge {
        padding: 7px 9px;
        font-size: 8px;
    }

    .dai-translator-body {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 17px;
    }

    .dai-live-translator {
        border-radius: 18px;
    }

    .dai-live-translator-head {
        min-height: 64px;
        padding: 0 17px;
    }

    .dai-live-translator-head strong {
        font-size: 14px;
    }

    .dai-live-translator-head .dai-edge-badge {
        padding: 7px 9px;
        font-size: 8px;
    }

    .dai-live-translator-frame {
        height: 810px;
    }

    .dai-live-translator-note {
        padding: 12px 16px;
        font-size: 11px;
    }

    .dai-source-card {
        min-height: 230px;
        padding: 19px;
    }

    .dai-source-card > p {
        margin-top: 30px;
        font-size: 21px;
    }

    .dai-ai-process {
        flex-direction: row;
        min-height: 70px;
    }

    .dai-ai-process::before,
    .dai-ai-process::after {
        display: none;
    }

    .dai-process-core {
        width: 47px;
        height: 47px;
        border-radius: 14px;
        font-size: 18px;
    }

    .dai-result-row {
        grid-template-columns: 48px minmax(0, 1fr) 15px;
        min-height: 59px;
        padding: 8px 13px;
    }

    .dai-result-row p {
        font-size: 10px;
    }

    .dai-example-wrap {
        padding-top: 16px;
    }

    .dai-example-label {
        right: 12px;
        padding: 8px 11px;
        font-size: 8px;
    }

    .dai-agent-app {
        border-radius: 18px;
    }

    .dai-agent-topbar {
        height: 62px;
        padding: 0 14px;
    }

    .dai-agent-brand strong {
        font-size: 14px;
    }

    .dai-agent-state {
        display: none;
    }

    .dai-agent-actions {
        gap: 13px;
    }

    .dai-agent-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .dai-task-panel {
        grid-column: auto;
        display: block;
        overflow: hidden;
        padding: 13px;
        white-space: nowrap;
    }

    .dai-task-panel > .dai-panel-heading,
    .dai-new-task {
        display: none;
    }

    .dai-task {
        display: inline-flex;
        width: auto;
        min-height: 54px;
        margin-right: 5px;
        padding: 9px 12px;
        vertical-align: top;
    }

    .dai-preview-panel {
        grid-template-rows: 54px minmax(370px, auto) 42px;
        border-right: 0;
        border-bottom: 1px solid #e1e7ee;
    }

    .dai-preview-panel > .dai-panel-heading,
    .dai-chat-panel > .dai-panel-heading {
        height: 54px;
        padding: 0 14px;
    }

    .dai-preview-stage {
        padding: 28px 14px;
    }

    .dai-esl-device {
        width: min(100%, 420px);
        padding: 9px 9px 13px;
        border-radius: 15px;
    }

    .dai-esl-screen {
        grid-template-rows: 42px minmax(0, 1fr) 40px;
    }

    .dai-esl-content {
        padding: 14px 14px 11px;
    }

    .dai-esl-main h4 {
        font-size: 24px;
    }

    .dai-esl-price strong {
        font-size: 48px;
    }

    .dai-esl-footer {
        grid-template-columns: 1fr auto;
        padding: 5px 10px;
    }

    .dai-chat-panel {
        grid-template-rows: 54px auto 61px;
    }

    .dai-chat-body {
        padding: 17px 14px;
    }

    .dai-message {
        max-width: 88%;
    }

    .dai-message p {
        font-size: 11px;
    }

    .dai-loop-section {
        padding: 85px 0;
    }

    .dai-loop-copy > p:last-child {
        font-size: 14px;
    }

    .dai-loop {
        grid-template-columns: 1fr;
        width: min(100%, 420px);
        margin: 45px auto 0;
        gap: 10px;
    }

    .dai-loop > div {
        display: grid;
        grid-template-columns: 32px 45px minmax(0, 1fr);
        justify-items: start;
        width: 100%;
        min-width: 0;
        padding: 14px 17px;
        text-align: left;
    }

    .dai-loop > div > span,
    .dai-loop > div > i,
    .dai-loop > div > strong {
        align-self: center;
        grid-row: 1;
    }

    .dai-loop > div > span { grid-column: 1; }
    .dai-loop > div > i { grid-column: 2; margin: 0; }
    .dai-loop > div > strong { grid-column: 3; }

    .dai-loop > i {
        transform: rotate(90deg);
    }

}

@media screen and (max-width: 420px) {
    .dai-hero h1 {
        font-size: 32px;
    }

    .dai-retail-visual {
        padding: 18px 14px;
    }

    .dai-retail-tag-grid {
        grid-template-columns: 1fr;
    }

    .dai-retail-tag-main {
        grid-column: auto;
    }

    .dai-field-grid {
        grid-template-columns: 1fr;
    }

    .dai-product-heading {
        display: block;
    }

    .dai-product-heading .dai-verified {
        margin-top: 12px;
    }

    .dai-sync-card {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .dai-sync-wave {
        display: none;
    }

    .dai-esl-price strong {
        font-size: 40px;
    }

    .dai-esl-price {
        right: 12px;
        bottom: 11px;
    }

    .dai-esl-main h4 {
        font-size: 20px;
    }

    .dai-esl-main p {
        max-width: 210px;
        font-size: 10px;
    }

}