/* ==========================================================================
   首页首屏（新）：品牌露出 + 自运行的产品界面动效
   - 只作用于首页 .home-hero 区域，旧版首屏样式已从 home.html 移除。
   - 中文标题使用思源黑体（Noto Sans SC），字体链接在 home.html 的 styles 块中加载。
   - 动效由 static/js/home-hero.js 驱动：通过切换 .demo-frame 的 data-step 与状态类，
     所有过渡/关键帧都在本文件里，JS 不含文案，便于 i18n 与无障碍处理。
   ========================================================================== */

.home-hero-section {
    display: flex;
    align-items: center;
}

.home-hero {
    /* 浅色主题令牌 */
    --hh-ink: #0e1b33;
    --hh-muted: #5b7295;
    --hh-brand: #3f6fff;
    --hh-glass-line: rgba(255, 255, 255, .92);
    --hh-window-radius: 14px;
    --hh-window-shadow: 0 12px 32px rgba(30, 66, 122, .12);
    --hh-demo-bg: #ffffff;
    --hh-demo-line: rgba(140, 170, 210, .26);
    --hh-demo-soft: #f5f9ff;
    --hh-demo-text: #1a3050;
    --hh-demo-muted: #7b90ad;
    --hh-demo-tint: rgba(63, 111, 255, .1);
    --hh-demo-scale: 1;
    /* 演示窗口按缩放前的尺寸统一标题、重点文字和正文。 */
    --hh-type-title: 26px;
    --hh-type-subtitle: 14px;
    --hh-type-body: 11px;

    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    width: 100%;
}

[data-theme="dark"] .home-hero {
    --hh-ink: #e8f0fb;
    --hh-muted: #9db2d0;
    --hh-glass-line: rgba(150, 190, 240, .22);
    --hh-window-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    --hh-demo-bg: #101d31;
    --hh-demo-line: rgba(140, 180, 235, .2);
    --hh-demo-soft: rgba(28, 46, 74, .72);
    --hh-demo-text: #dbe7f7;
    --hh-demo-muted: #8ba3c4;
    --hh-demo-tint: rgba(96, 150, 255, .16);
}

/* ------------------------------ 左栏文案 ------------------------------ */
.home-hero-copy { min-width: 0; }

.home-hero-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.home-hero-wordmark {
    display: block;
    height: 38px;
    width: auto;
}
[data-theme="dark"] .home-hero-wordmark { filter: brightness(0) invert(1); }

.home-hero-brand-sep {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, var(--hh-demo-line), transparent);
}

.home-hero-brand-desc {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: var(--home-type-body);
    font-weight: 500;
    letter-spacing: .05em;
    color: var(--hh-muted);
}

.home-hero-title {
    margin: 0;
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: var(--home-type-title);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.005em;
    color: var(--hh-ink);
}

.home-hero-title:lang(zh) {
    font-size: calc(var(--home-type-title) * .92);
}

.home-hero-tagline {
    margin: 20px 0 0;
    width: fit-content;
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: var(--home-type-subtitle);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    background: linear-gradient(101deg, #6ea8ff 2%, #3f6fff 52%, #2f5bea 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-theme="dark"] .home-hero-tagline {
    background: linear-gradient(101deg, #9cc4ff 2%, #6d9bff 52%, #4f7dff 96%);
    -webkit-background-clip: text;
    background-clip: text;
}

.home-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px 24px;
    margin-top: 42px;
    flex-wrap: wrap;
}

.home-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--statau-radius-control);
    font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: var(--home-type-body);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}
.home-hero-btn-primary {
    color: #fff;
    background: var(--hh-brand);
    box-shadow: 0 1px 2px rgba(52, 73, 110, .15);
}
.home-hero-btn-primary:hover {
    color: #fff;
    background: color-mix(in srgb, var(--hh-brand) 90%, black);
}
.home-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hh-muted);
    font-size: var(--home-type-body);
    font-weight: 600;
    text-decoration: none;
}
.home-hero-link:hover {
    color: var(--hh-brand);
    text-decoration: underline;
    text-underline-offset: .2em;
}
.home-hero-arrow { font-size: inherit; line-height: 1; opacity: .9; }

.home-hero-actions :is(.home-hero-btn, .home-hero-link):focus-visible {
    outline: 2px solid var(--hh-brand);
    outline-offset: 3px;
}

/* 用暖色按钮和免费会员标签突出活动入口。 */
.home-hero-reward { position: relative; }
.home-hero-btn-reward {
    position: relative;
    padding-inline: 18px;
    gap: 8px;
    color: #7c4713;
    background: linear-gradient(125deg, #fff5dc, #ffe7b6);
    border: 1px solid #e4b55a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 5px 18px rgba(191, 129, 35, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.home-hero-btn-reward:hover {
    color: #6b390c;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 8px 24px rgba(191, 129, 35, .2);
}
.home-hero-btn-reward > .bi { font-size: 18px; }
.home-hero-reward-badge {
    position: absolute;
    top: -12px;
    right: 10px;
    padding: 3px 9px;
    border-radius: 20px;
    color: #fff;
    background: #ad5714;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .04em;
    white-space: nowrap;
}
[data-theme="dark"] .home-hero-btn-reward {
    color: #ffcf83;
    background: linear-gradient(125deg, #35261d, #44311d);
    border-color: #956a35;
    box-shadow: inset 0 1px 0 rgba(255, 218, 161, .12), 0 5px 18px rgba(0, 0, 0, .15);
}
[data-theme="dark"] .home-hero-btn-reward:hover { color: #ffe2ad; }
[data-theme="dark"] .home-hero-reward-badge { color: #59340d; background: #ffd492; }
@media (max-width: 575px) {
    .home-hero-actions-sharing { gap: 22px 16px; align-items: stretch; }
    .home-hero-actions-sharing > .home-hero-btn,
    .home-hero-reward { flex: 1 1 240px; }
    .home-hero-btn-reward { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero-btn-reward { transition: none; }
    .home-hero-btn-reward:hover { transform: none; }
}

/* ------------------------------ 右侧动效演示 ------------------------------ */
.home-hero-demo {
    --hh-result-scale: 1;
    position: relative;
    justify-self: center;
    width: calc(660px * var(--hh-demo-scale));
    height: calc(452px * var(--hh-demo-scale));
    min-width: 0;
}
.home-hero-demo::before {
    content: '';
    position: absolute;
    inset: 6% -8% 8% 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(122, 178, 255, .34), rgba(122, 178, 255, 0) 72%);
    filter: blur(34px);
    z-index: -1;
    transition: background 1.2s ease;
}
.home-hero-section.is-showcase .home-hero-demo::before {
    background: radial-gradient(closest-side, rgba(120, 176, 255, .55), rgba(122, 178, 255, 0) 74%);
}

.demo-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 660px;
    height: 452px;
    transform: scale(var(--hh-demo-scale));
    transform-origin: top left;
    overflow: hidden;
    border-radius: var(--hh-window-radius);
    border: 1px solid var(--hh-glass-line);
    background: var(--hh-demo-bg);
    color: var(--hh-demo-text);
    font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    box-shadow: var(--hh-window-shadow);
    text-align: left;
    transition: opacity .7s ease, filter .7s ease, transform .9s cubic-bezier(.4, .1, .2, 1);
}
.home-hero-section.is-showcase .demo-frame {
    opacity: 0;
    filter: blur(10px);
    transform: scale(calc(var(--hh-demo-scale) * .94)) translateY(-12px);
    pointer-events: none;
}

.demo-chrome {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 14px;
    background: var(--hh-demo-soft);
    border-bottom: 1px solid var(--hh-demo-line);
}
.demo-dots { display: flex; gap: 5px; }
.demo-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(150, 170, 200, .45); }
.demo-dots i:first-child { background: #ffd2cc; }
.demo-dots i:nth-child(2) { background: #ffe9bf; }
.demo-dots i:nth-child(3) { background: #c9ecd5; }
.demo-url {
    flex: 1;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--statau-radius-label);
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--hh-demo-line);
    font-size: var(--hh-type-body);
    letter-spacing: .02em;
    color: var(--hh-demo-muted);
}
[data-theme="dark"] .demo-url { background: rgba(255, 255, 255, .06); }

/* ---------------- 窗口内：选模型 + 选变量 ---------------- */
.demo-view-select {
    position: absolute;
    left: 0;
    right: 0;
    top: 34px;
    bottom: 0;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 168px;
    gap: 12px;
    padding: 14px;
}

.demo-side {
    padding: 12px 10px;
    border-radius: var(--statau-radius-control);
    background: var(--hh-demo-soft);
    border: 1px solid var(--hh-demo-line);
    overflow: hidden;
}
.demo-side-title {
    margin-bottom: 6px;
    padding-left: 6px;
    font-size: var(--hh-type-body);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--hh-demo-muted);
}
.demo-side-scroll {
    position: relative;
    height: calc(100% - 22px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.demo-side-track { will-change: transform; }
.demo-side-item {
    height: 27px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-radius: var(--statau-radius-label);
    font-size: var(--hh-type-body);
    color: var(--hh-demo-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .5s ease, color .5s ease, box-shadow .5s ease;
}
.demo-side-item.is-active {
    background: var(--hh-demo-bg);
    color: var(--hh-brand);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(30, 66, 122, .1);
}
.demo-side-item.is-flash { animation: demo-row-flash 1.8s ease; }

.demo-main {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--hh-demo-line);
    border-radius: var(--statau-radius-control);
}
.demo-file {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--hh-type-body);
    color: var(--hh-demo-text);
    white-space: nowrap;
}
.demo-file i {
    flex: 0 0 13px;
    width: 13px;
    height: 15px;
    border-radius: 3px;
    background: linear-gradient(150deg, #e9f2ff, #d8e8ff);
    border: 1px solid rgba(63, 111, 255, .2);
}
.demo-file span { margin-left: auto; font-size: var(--hh-type-body); color: var(--hh-demo-muted); }
.demo-field .demo-label {
    margin-bottom: 5px;
    font-size: var(--hh-type-body);
    color: var(--hh-demo-muted);
}
.demo-input {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: var(--statau-radius-label);
    border: 1px solid var(--hh-demo-line);
    background: var(--hh-demo-soft);
    font-size: var(--hh-type-body);
    color: var(--hh-demo-text);
}
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 25px;
    padding: 0 9px;
    border-radius: var(--statau-radius-label);
    border: 1px solid var(--hh-demo-line);
    background: var(--hh-demo-soft);
    font-size: var(--hh-type-body);
    color: var(--hh-demo-muted);
    transition: background .44s ease, color .44s ease, border-color .44s ease, transform .32s ease;
}
.demo-chip.is-on {
    background: var(--hh-demo-tint);
    border-color: rgba(63, 111, 255, .35);
    color: var(--hh-brand);
    font-weight: 600;
}
.demo-chip.is-on::before { content: '✓'; font-size: var(--hh-type-body); line-height: 1; }

.demo-run {
    margin-top: auto;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--statau-radius-label);
    background: linear-gradient(128deg, #5e93ff, #3f6fff);
    color: #fff;
    font-size: var(--hh-type-subtitle);
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 6px 14px rgba(63, 111, 255, .26);
    transition: transform .36s ease, box-shadow .36s ease;
}
.demo-frame[data-step="5"] .demo-run { transform: scale(.97); box-shadow: 0 3px 8px rgba(63, 111, 255, .22); }

.demo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: var(--statau-radius-control);
    border: 1px solid var(--hh-demo-line);
    background: rgba(63, 111, 255, .035);
    color: var(--hh-demo-muted);
}
.demo-skeleton { width: 84%; height: 6px; border-radius: var(--statau-radius-label); background: var(--hh-demo-line); }
.demo-skeleton.short { width: 58%; }
.demo-placeholder em { margin-top: 6px; font-style: normal; font-size: var(--hh-type-body); letter-spacing: .02em; }

/* ---------------- 结果层：冲出窗口，直接铺在首页背景上 ---------------- */
.hero-result {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 640px;
    transform: translate(-50%, -50%) scale(var(--hh-result-scale));
    transform-origin: center center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    transition: opacity .56s ease, visibility .56s;
}
.home-hero-section.is-showcase .hero-result {
    opacity: 1;
    visibility: visible;
}
.hero-result::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;
    border-radius: 50%;
    border: 2px solid rgba(63, 111, 255, .4);
    opacity: 0;
}
.home-hero-section.is-showcase .hero-result::before {
    animation: hero-ring 1.9s ease-out .1s;
}

/* 主报告卡 */
.hero-report {
    position: absolute;
    left: 270px;
    top: 40px;
    width: 380px;
    height: 490px;
    padding: 18px 18px 12px;
    border-radius: var(--hh-window-radius);
    border: 1px solid var(--hh-demo-line);
    background: var(--hh-demo-bg);
    box-shadow: var(--hh-window-shadow);
    overflow: hidden;
    opacity: 0;
    transform: translate(-180px, 110px) scale(.32) rotate(-2deg);
}
.home-hero-section.is-showcase .hero-report {
    animation: hero-in-report 1.8s cubic-bezier(.16, 1.08, .3, 1) both;
}
.hero-report::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 0;
    width: 60%;
    height: 140%;
    transform: translateX(-180%) rotate(9deg);
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .75), transparent);
    pointer-events: none;
}
.home-hero-section.is-showcase .hero-report::after {
    animation: hero-shine 2s .6s ease-out;
}
.hero-report-head { display: flex; align-items: center; justify-content: space-between; }
.hero-report-title { font-size: var(--hh-type-subtitle); font-weight: 700; color: var(--hh-demo-text); }
.hero-report-actions { display: flex; gap: 6px; }
.hero-report-actions i {
    padding: 2px 8px;
    border-radius: var(--statau-radius-label);
    border: 1px solid rgba(63, 111, 255, .3);
    background: rgba(63, 111, 255, .06);
    font-style: normal;
    font-size: var(--hh-type-body);
    color: var(--hh-brand);
}
.hero-report-meta {
    margin-top: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hh-demo-line);
    font-size: var(--hh-type-body);
    color: var(--hh-demo-muted);
}
.hero-ttable { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 6px; }
.hero-ttable th {
    border-bottom: 1px solid var(--hh-demo-line);
    padding: 5px 4px;
    text-align: right;
    font-size: var(--hh-type-body);
    font-weight: 500;
    color: var(--hh-demo-muted);
}
.hero-ttable th:first-child { text-align: left; }
.hero-ttable td {
    padding: 7px 4px;
    text-align: right;
    font-size: var(--hh-type-body);
    color: var(--hh-demo-text);
    white-space: nowrap;
    border-bottom: 1px solid var(--hh-demo-line);
}
.hero-ttable td.l { text-align: left; font-weight: 500; }
.hero-ttable td em { font-style: normal; color: #e0592f; font-weight: 600; }
.hero-ttable tbody tr { opacity: 0; border-radius: var(--statau-radius-label); }
.hero-ttable tbody td:first-child { border-radius: var(--statau-radius-label) 0 0 var(--statau-radius-label); }
.hero-ttable tbody td:last-child { border-radius: 0 var(--statau-radius-label) var(--statau-radius-label) 0; }
.home-hero-section.is-showcase .hero-ttable tbody tr {
    animation: hero-row .8s ease both;
}
.home-hero-section.is-showcase .hero-ttable tbody tr:nth-child(1) { animation-delay: .64s; }
.home-hero-section.is-showcase .hero-ttable tbody tr:nth-child(2) { animation-delay: .84s; }
.home-hero-section.is-showcase .hero-ttable tbody tr:nth-child(3) { animation-delay: 1.04s; }
.home-hero-section.is-showcase .hero-ttable tbody tr:nth-child(4) { animation-delay: 1.24s; }
.home-hero-section.is-showcase .hero-ttable tbody tr:nth-child(5) { animation-delay: 1.44s; }
.home-hero-section.is-showcase .hero-ttable tbody tr:nth-child(6) { animation-delay: 1.64s; }
.hero-table-note { margin-top: 8px; font-size: var(--hh-type-body); color: var(--hh-demo-muted); }
.hero-report-chart {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    height: 66px;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding-top: 6px;
    border-top: 1px solid var(--hh-demo-line);
}
.hero-report-chart i {
    flex: 1;
    height: 0;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #a8c8ff, #3f6fff);
    transition: height 1.2s cubic-bezier(.2, .8, .25, 1);
}
.home-hero-section.is-showcase .hero-report-chart i {
    height: var(--h);
    transition-delay: calc(1.5s + var(--i, 0) * .14s);
}

/* 悬浮结果卡 */
.hero-float {
    position: absolute;
    padding: 13px 15px;
    border-radius: var(--statau-radius-panel);
    border: 1px solid var(--hh-demo-line);
    background: var(--hh-demo-bg);
    box-shadow: 0 24px 50px rgba(30, 66, 122, .22);
    opacity: 0;
    z-index: 4;
}
.hero-float-bars {
    left: 6px;
    top: 150px;
    width: 250px;
    --tilt: -1.6deg;
    transform: translate(-240px, 160px) scale(.2) rotate(-14deg);
}
.hero-float-key {
    right: 6px;
    top: 92px;
    width: 232px;
    --tilt: 1.6deg;
    transform: translate(210px, 70px) scale(.22) rotate(12deg);
}
.hero-float-r2 {
    left: 40px;
    bottom: 66px;
    width: 180px;
    --tilt: -1deg;
    transform: translate(-170px, 150px) scale(.28) rotate(-8deg);
}
.hero-float-ai {
    right: 8px;
    bottom: 48px;
    width: 262px;
    --tilt: 1.2deg;
    transform: translate(200px, 150px) scale(.2) rotate(7deg);
}
.home-hero-section.is-showcase .hero-float {
    animation: hero-in-float 1.6s cubic-bezier(.16, 1.1, .3, 1) both;
}
.home-hero-section.is-showcase .hero-float-bars { animation-delay: .28s; }
.home-hero-section.is-showcase .hero-float-key { animation-delay: .48s; }
.home-hero-section.is-showcase .hero-float-r2 { animation-delay: .62s; }
.home-hero-section.is-showcase .hero-float-ai { animation-delay: .76s; }

.hero-float-title {
    font-size: var(--hh-type-body);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--hh-demo-muted);
}
.hero-float-ai .hero-float-title { color: #7a5cff; }
.hero-float-ai p { margin: 7px 0 0; font-size: var(--hh-type-body); line-height: 1.65; color: var(--hh-demo-text); }

.hero-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.hero-bar {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 7px;
    font-size: var(--hh-type-body);
    color: var(--hh-demo-muted);
}
.hero-bar i {
    display: block;
    width: 0;
    height: 8px;
    border-radius: var(--statau-radius-label);
    background: linear-gradient(90deg, #9cc2ff, #3f6fff);
    transition: width 1.3s cubic-bezier(.2, .8, .25, 1);
}
.home-hero-section.is-showcase .hero-bar i {
    width: var(--w);
    transition-delay: calc(1.1s + var(--i, 0) * .18s);
}
.hero-bar b { text-align: right; font-size: var(--hh-type-body); font-weight: 600; color: var(--hh-demo-text); }

.hero-big {
    margin-top: 4px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: var(--hh-type-title);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--hh-brand);
}
.hero-big span { font-size: var(--hh-type-subtitle); color: #e0592f; }
.hero-float-sub { margin-top: 3px; font-size: var(--hh-type-body); color: var(--hh-demo-text); }

.hero-sparkles { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.hero-sparkles i { position: absolute; font-style: normal; opacity: 0; }
.hero-sparkles i::before { content: '✦'; font-size: var(--s, 14px); color: #7fb0ff; }
.hero-sparkles i:nth-child(1) { left: 18%; top: 18%; --s: 17px; }
.hero-sparkles i:nth-child(2) { left: 40%; top: 6%; --s: 11px; }
.hero-sparkles i:nth-child(3) { right: 24%; top: 16%; --s: 15px; }
.hero-sparkles i:nth-child(4) { right: 8%; top: 40%; --s: 10px; }
.hero-sparkles i:nth-child(5) { left: 14%; top: 68%; --s: 12px; }
.hero-sparkles i:nth-child(6) { right: 18%; bottom: 10%; --s: 16px; }
.home-hero-section.is-showcase .hero-sparkles i {
    animation: hero-spark 2.4s ease-out both;
}
.home-hero-section.is-showcase .hero-sparkles i:nth-child(1) { animation-delay: .5s; }
.home-hero-section.is-showcase .hero-sparkles i:nth-child(2) { animation-delay: .68s; }
.home-hero-section.is-showcase .hero-sparkles i:nth-child(3) { animation-delay: .84s; }
.home-hero-section.is-showcase .hero-sparkles i:nth-child(4) { animation-delay: 1s; }
.home-hero-section.is-showcase .hero-sparkles i:nth-child(5) { animation-delay: 1.16s; }
.home-hero-section.is-showcase .hero-sparkles i:nth-child(6) { animation-delay: 1.32s; }

/* 光标 */
.demo-cursor {
    position: absolute;
    left: 88%;
    top: 106%;
    z-index: 9;
    pointer-events: none;
    transition:
        left .92s cubic-bezier(.4, .1, .2, 1),
        top .92s cubic-bezier(.4, .1, .2, 1),
        opacity .4s ease;
}
.demo-frame[data-step="1"] .demo-cursor { left: 30%; top: 33%; }
.demo-frame[data-step="2"] .demo-cursor { left: 40%; top: 33%; }
.demo-frame[data-step="3"] .demo-cursor { left: 31%; top: 43%; }
.demo-frame[data-step="4"] .demo-cursor { left: 42%; top: 43%; }
.demo-frame[data-step="5"] .demo-cursor { left: 49%; top: 90%; }
.home-hero-section.is-showcase .demo-cursor { opacity: 0; }
.demo-cursor svg {
    display: block;
    width: 20px;
    height: 22px;
    filter: drop-shadow(0 3px 6px rgba(30, 60, 110, .35));
}
.demo-ripple {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(63, 111, 255, .55);
    opacity: 0;
}
.demo-frame.is-clicking .demo-ripple { animation: hh-ping 1s ease-out; }
.demo-frame.is-clicking .demo-cursor svg { animation: hh-click .8s ease; }

@keyframes demo-row-flash {
    0%, 100% { box-shadow: 0 1px 4px rgba(30, 66, 122, .1); }
    35% { box-shadow: 0 0 0 3px rgba(63, 111, 255, .18); }
}
@keyframes hero-in-report {
    0% { opacity: 0; transform: translate(-180px, 110px) scale(.32) rotate(-2deg); }
    55% { opacity: 1; transform: translate(14px, -10px) scale(1.035) rotate(.6deg); }
    100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}
@keyframes hero-in-float {
    0% { opacity: 0; }
    1% { opacity: 1; }
    55% { opacity: 1; transform: translate(0, -8px) scale(1.05) rotate(2deg); }
    100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(var(--tilt, 0deg)); }
}
@keyframes hero-ring {
    0% { opacity: .8; transform: scale(.3); }
    100% { opacity: 0; transform: scale(2.4); }
}
@keyframes hero-row {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@keyframes hero-shine {
    0% { transform: translateX(-180%) rotate(9deg); }
    100% { transform: translateX(330%) rotate(9deg); }
}
@keyframes hero-spark {
    0% { opacity: 0; transform: scale(.2) rotate(0); }
    30% { opacity: 1; transform: scale(1.2) rotate(35deg); }
    100% { opacity: 0; transform: scale(.45) rotate(95deg); }
}
@keyframes hh-ping {
    0% { opacity: .9; transform: scale(.5); }
    100% { opacity: 0; transform: scale(1.7); }
}
@keyframes hh-click {
    0%, 100% { transform: scale(1); }
    42% { transform: scale(.84); }
}

/* 结果层的缩放：保证在常见宽度下都能“冲出窗口”又不被视口裁掉 */
@media (max-width: 1599px) { .home-hero-demo { --hh-result-scale: .94; } }
@media (max-width: 1439px) { .home-hero-demo { --hh-result-scale: .9; } }
@media (max-width: 1279px) { .home-hero-demo { --hh-result-scale: .82; } }
@media (max-width: 1199px) { .home-hero-demo { --hh-result-scale: .78; } }
@media (max-width: 1099px) { .home-hero-demo { --hh-result-scale: .72; } }
@media (max-width: 767px) {
    .home-hero-demo { --hh-result-scale: .4; }
    .hero-float-bars, .hero-float-r2, .hero-float-ai { display: none; }
}

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width: 1439px) {
    .home-hero { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 36px; }
    .home-hero-demo { --hh-demo-scale: .94; }
    .home-glass { --home-type-title: 60px; }
}

@media (max-width: 1199px) {
    .home-hero { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 30px; }
    .home-hero-demo { --hh-demo-scale: .8; }
    .home-glass { --home-type-title: 52px; }
}

@media (max-width: 1099px) {
    .home-hero {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: 28px;
    }
    .home-hero-demo { justify-self: center; --hh-demo-scale: .88; }
    .home-glass { --home-type-title: 50px; }
}

@media (max-width: 767px) {
    .home-hero { gap: 22px; }
    .home-hero-demo { --hh-demo-scale: .6; }
    .home-glass { --home-type-title: 37px; }
    .home-hero-wordmark { height: 28px; }
    .home-hero-brand { gap: 12px; margin-bottom: 18px; }
    .home-hero-brand-sep { height: 24px; }
    .home-hero-brand-desc { letter-spacing: .03em; }
    .home-hero-actions { column-gap: 16px; margin-top: 28px; }
}

@media (max-width: 430px) {
    .home-hero-demo { --hh-demo-scale: .53; }
}

/* 矮屏笔记本：压缩纵向节奏，保证首屏一屏装下 */
@media (min-width: 1100px) and (max-height: 820px) {
    .home-glass { --home-type-title: 54px; }
    .home-hero-brand { margin-bottom: 18px; }
    .home-hero-wordmark { height: 32px; }
    .home-hero-actions { margin-top: 30px; }
    .home-hero-demo { --hh-demo-scale: .9; }
}

/* 大屏：适度放大主标题与演示窗口。 */
@media (min-width: 1600px) {
    .home-hero { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 56px; }
    .home-hero-demo { --hh-demo-scale: 1.06; }
    .home-glass { --home-type-title: 70px; }
    .home-hero-wordmark { height: 40px; }
}

/* 英文界面：按可用宽度调整主标题，避免长句挤占首屏。 */
html[lang="en"] .home-glass { --home-type-title: 56px; }
html[lang="en"] .home-hero-title { letter-spacing: -.012em; }
html[lang="en"] .home-hero-tagline { letter-spacing: .01em; }
html[lang="en"] .home-hero-brand-desc {
    max-width: 230px;
    line-height: 1.35;
    letter-spacing: .02em;
}
@media (min-width: 1600px) {
    html[lang="en"] .home-glass { --home-type-title: 62px; }
}
@media (max-width: 1439px) {
    html[lang="en"] .home-glass { --home-type-title: 50px; }
}
@media (max-width: 767px) {
    html[lang="en"] .home-glass { --home-type-title: 36px; }
}

/* 无障碍：系统开启「减少动态效果」时定格在完成态（JS 也会直接进入完成态） */
@media (prefers-reduced-motion: reduce) {
    .home-hero-demo *,
    .home-hero-btn {
        animation: none !important;
        transition: none !important;
    }
}