
.home-landing { background: #fff; }

.landing-hero {
    position: relative;
    overflow: hidden;
    padding: 58px max(32px, calc((100% - 1280px) / 2)) 0;
    border-top: 1px solid #e7eef8;
    background:
        linear-gradient(90deg, rgb(36 107 253 / 4%) 1px, transparent 1px) center / 56px 56px,
        linear-gradient(rgb(36 107 253 / 4%) 1px, transparent 1px) center / 56px 56px,
        linear-gradient(180deg, #fbfcff 0%, #fff 82%);
}

.landing-hero__glow {
    position: absolute;
    top: -280px;
    left: 50%;
    width: 920px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(75 137 255 / 17%) 0%, rgb(75 137 255 / 0%) 68%);
    transform: translateX(-50%);
    pointer-events: none;
}

.landing-hero__inner {
    position: relative;
    display: grid;
    min-height: 460px;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(540px, 1.06fr);
    gap: 54px;
}

.landing-hero__content { order: 2; align-self: center; padding-bottom: 18px; }

.landing-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    color: #3c67aa;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .08em;
}

.landing-hero__eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--home-brand);
    box-shadow: 0 0 0 5px rgb(36 107 253 / 11%);
}

.landing-hero__title {
    margin: 0;
    color: #111d35;
    font-size: 48px;
    font-weight: 730;
    letter-spacing: -.055em;
    line-height: 1.18;
}

.landing-hero__title span { color: var(--home-brand); }

.landing-hero__lead {
    max-width: 520px;
    margin: 24px 0 0;
    color: #66748d;
    font-size: 16px;
    line-height: 1.85;
}

.landing-hero__actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}

.landing-hero__actions .button span,
.landing-cta__actions .button span { margin-left: 12px; font-size: 18px; line-height: 1; }

.landing-hero__catalog-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #34435d;
    font-size: 14px;
    font-weight: 600;
}

.landing-hero__catalog-link span { color: var(--home-brand); font-size: 16px; }
.landing-hero__catalog-link:hover { color: var(--home-brand); }

.landing-hero__assurances {
    display: flex;
    gap: 22px;
    margin: 26px 0 0;
    padding: 0;
    color: #7a879b;
    font-size: 12px;
    list-style: none;
}

.landing-hero__assurances li { display: flex; align-items: center; gap: 8px; }

.landing-hero__assurances li::before {
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 50%;
    color: #168263;
    background: #e8f8f3;
    content: "\2713";
    font-size: 10px;
    font-weight: 800;
}

.workspace-preview {
    position: relative;
    order: 1;
    overflow: visible;
    border: 1px solid #d8e2f2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 34px 80px rgb(32 73 145 / 17%);
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) scale(.94);
    transform-origin: center center;
}

.workspace-preview::before {
    position: absolute;
    right: -22px;
    bottom: -22px;
    z-index: -1;
    width: 78%;
    height: 78%;
    border-radius: 20px;
    background: linear-gradient(145deg, #dbe9ff, #f3f7ff);
    content: "";
}

.workspace-preview__windowbar {
    display: flex;
    height: 42px;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    border-bottom: 1px solid #e9eef6;
    border-radius: 20px 20px 0 0;
    background: #fbfcfe;
}

.workspace-preview__windowbar > span { width: 7px; height: 7px; border-radius: 50%; background: #d5dce8; }
.workspace-preview__windowbar small { margin-left: 9px; color: #a0aabc; font-size: 9px; }
.workspace-preview__body { display: grid; min-height: 360px; grid-template-columns: 64px 1fr; }

.workspace-preview__sidebar {
    display: flex;
    align-items: center;
    padding: 18px 0;
    border-right: 1px solid #e9eef6;
    border-radius: 0 0 0 20px;
    background: #f8faff;
    flex-direction: column;
    gap: 18px;
}

.workspace-preview__mini-brand {
    display: grid;
    width: 30px;
    height: 30px;
    margin-bottom: 11px;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, #4b89ff, #246bfd);
    box-shadow: 0 6px 14px rgb(36 107 253 / 24%);
    font-size: 13px;
    font-weight: 750;
}

.workspace-preview__sidebar > span { width: 20px; height: 6px; border-radius: 3px; background: #d7deea; }
.workspace-preview__sidebar > span.is-active { width: 28px; height: 28px; border-radius: 8px; background: #e8f1ff; box-shadow: inset 4px 0 0 var(--home-brand); }
.workspace-preview__main { padding: 24px 28px 26px; }
.workspace-preview__heading { display: flex; align-items: center; justify-content: space-between; }
.workspace-preview__heading > div { display: grid; gap: 3px; }
.workspace-preview__heading small { color: #99a5b7; font-size: 9px; }
.workspace-preview__heading strong { color: #1c2940; font-size: 16px; }

.workspace-preview__heading > span {
    padding: 5px 9px;
    border-radius: 999px;
    color: #9a6505;
    background: #fff4d9;
    font-size: 9px;
    font-weight: 650;
}

.workspace-preview__status {
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding: 18px 21px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(120deg, #174fbf, #357cff 72%, #65a0ff);
    box-shadow: 0 12px 24px rgb(36 107 253 / 18%);
}

.workspace-preview__status-copy { display: grid; gap: 6px; }
.workspace-preview__status-copy span,
.workspace-preview__status-copy small { color: #dce8ff; font-size: 9px; }
.workspace-preview__status-copy strong { font-size: 16px; }

.workspace-preview__progress {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 5px solid rgb(255 255 255 / 32%);
    border-top-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    transform: rotate(28deg);
}

.workspace-preview__progress span {
    font-size: 0;
    font-weight: 700;
    transform: rotate(-28deg);
    counter-reset: num var(--num, 72);
}

.workspace-preview__progress span::after {
    content: counter(num) "%";
    font-size: 12px;
    font-weight: 700;
}

.workspace-preview__application {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #e7edf6;
    border-radius: 11px;
}

.workspace-preview__university { display: flex; align-items: center; gap: 11px; }
.workspace-preview__university > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #2e64c8; background: #edf4ff; font-size: 12px; font-weight: 750; }
.workspace-preview__university div { display: grid; gap: 3px; }
.workspace-preview__university strong { color: #27344a; font-size: 11px; }
.workspace-preview__university small { color: #98a3b5; font-size: 8px; }
.workspace-preview__tag { padding: 5px 8px; border-radius: 6px; color: #1e62d9; background: #edf4ff; font-size: 8px; font-weight: 650; }

.workspace-preview__steps {
    position: relative;
    display: grid;
    margin: 24px 0 0;
    padding: 0;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
}

.workspace-preview__steps::before { position: absolute; top: 11px; right: 12.5%; left: 12.5%; height: 2px; background: #e5eaf2; content: ""; }
.workspace-preview__steps li { position: relative; display: grid; justify-items: center; gap: 7px; }

.workspace-preview__steps li > span {
    z-index: 1;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 2px solid #dce3ed;
    border-radius: 50%;
    color: #a1abba;
    background: #fff;
    font-size: 8px;
    font-weight: 700;
}

.workspace-preview__steps small { color: #929daf; font-size: 8px; }
.workspace-preview__steps .is-complete > span { border-color: #19b98b; color: #fff; background: #19b98b; }
.workspace-preview__steps .is-current > span { border-color: var(--home-brand); color: var(--home-brand); box-shadow: 0 0 0 4px rgb(36 107 253 / 10%); }
.workspace-preview__steps .is-current small { color: var(--home-brand); font-weight: 650; }

.workspace-preview__floating-card {
    position: absolute;
    right: 12px;
    bottom: 38px;
    z-index: 6;
    display: flex;
    min-width: 196px;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid #dbe7f5;
    border-radius: 12px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 16px 34px rgb(30 63 119 / 16%);
    backdrop-filter: blur(8px);
}

.workspace-preview__floating-card > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #fff; background: #19b98b; font-size: 11px; font-weight: 800; }
.workspace-preview__floating-card div { display: grid; gap: 3px; }
.workspace-preview__floating-card strong { color: #26344b; font-size: 10px; }
.workspace-preview__floating-card small { color: #8b97a9; font-size: 8px; }

/* 申请工作台 —— 实时演示动效（纯 CSS，无 JS） */
@property --num {
    syntax: '<integer>';
    initial-value: 72;
    inherits: false;
}

.workspace-preview__progress { animation: wsRingGlow 2.8s ease-in-out infinite, wsCount 3.4s ease-in-out infinite; }
@keyframes wsRingGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12) drop-shadow(0 0 6px rgb(255 255 255 / 45%)); }
}
@keyframes wsCount {
    0% { --num: 0; }
    55%, 100% { --num: 72; }
}

.workspace-preview__steps::after {
    position: absolute;
    top: 11px;
    left: 12.5%;
    z-index: 0;
    height: 2px;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #357cff, #65a0ff);
    content: "";
    animation: wsTrack 6.5s ease-in-out infinite;
}
@keyframes wsTrack {
    0% { width: 0; }
    35% { width: 25%; }
    70% { width: 50%; }
    100% { width: 25%; }
}

.workspace-preview__steps .is-current > span { animation: wsPulse 2.4s ease-in-out infinite; }
@keyframes wsPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgb(36 107 253 / 10%); }
    50% { box-shadow: 0 0 0 9px rgb(36 107 253 / 16%); }
}

.workspace-preview__floating-card { animation: wsFloat 6.5s ease-in-out infinite; }
@keyframes wsFloat {
    0%, 44%, 100% { opacity: 0; transform: translateY(12px); }
    54%, 82% { opacity: 1; transform: translateY(0); }
}

.workspace-preview__sidebar > span.is-active { animation: wsNav 2.6s ease-in-out infinite; }
@keyframes wsNav {
    0%, 100% { box-shadow: inset 4px 0 0 var(--home-brand); }
    50% { box-shadow: inset 4px 0 0 var(--home-brand), 0 0 0 4px rgb(36 107 253 / 12%); }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-preview__progress,
    .workspace-preview__steps::after,
    .workspace-preview__steps .is-current > span,
    .workspace-preview__floating-card,
    .workspace-preview__sidebar > span.is-active { animation: none !important; }
    .workspace-preview__steps::after { width: 25%; }
    .workspace-preview__floating-card { opacity: 1; transform: none; }
}

.landing-hero__proof {
    position: relative;
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    margin-top: 34px;
    border-top: 1px solid #e4eaf3;
    color: #929daf;
    font-size: 12px;
}

.landing-hero__proof > span { font-weight: 600; letter-spacing: .04em; }
.landing-hero__proof ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.landing-hero__proof li { display: flex; align-items: center; color: #66748b; font-size: 13px; font-weight: 600; }
.landing-hero__proof li:not(:first-child)::before { width: 3px; height: 3px; margin: 0 26px; border-radius: 50%; background: #b5c0d0; content: ""; }

.landing-match {
    position: relative;
    z-index: 1;
    padding: 112px max(32px, calc((100% - 1280px) / 2)) 132px;
    background:
        radial-gradient(520px 320px at 92% 12%, rgb(36 107 253 / 8%), transparent 70%) no-repeat,
        linear-gradient(180deg, #f4f8ff 0%, #fbfdff 62%, #fff 100%);
}

.landing-match__inner {
    display: grid;
    align-items: center;
    grid-template-columns: 560px minmax(0, 1fr);
    gap: 84px;
}

.landing-match__content { max-width: 560px; text-align: left; }

.landing-match h2 {
    margin: 0;
    color: #17233a;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.18;
}

.landing-match h2 span { color: var(--home-brand); }

/* 选校首屏：眉标收紧，让主标题上移 */
.landing-match .page-eyebrow { margin-bottom: 6px; }

.landing-match__lead {
    margin: 22px 0 0;
    color: #66748d;
    font-size: 16px;
    line-height: 1.85;
}

.landing-match__actions { display: flex; align-items: center; gap: 24px; margin-top: 46px; }
.landing-match__actions .button span { margin-left: 12px; font-size: 18px; line-height: 1; }

.landing-match__link { display: inline-flex; align-items: center; gap: 7px; color: #34435d; font-size: 14px; font-weight: 600; }
.landing-match__link span { color: var(--home-brand); font-size: 16px; }
.landing-match__link:hover { color: var(--home-brand); }

.landing-match__note {
    margin: 40px 0 0;
    padding-top: 24px;
    border-top: 1px solid #e4eaf3;
    color: #929daf;
    font-size: 12px;
    line-height: 1.7;
}

/* 选校首屏：右侧 CoverFlow 院校卡片轮播（参考 soloapply 卡片样式） */
.match-cards {
    position: relative;
    height: 400px;
    perspective: 1400px;
    user-select: none;
}

.match-cards__viewport {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .45s ease;
}

.match-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(320px, 86%);
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid #e7edf6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 48px rgb(30 63 119 / 12%);
    transform: translate(-50%, -50%) translateX(var(--tx, 0)) translateZ(var(--tz, 0)) scale(var(--scale, 1)) rotateY(var(--ry-card, 0deg));
    opacity: var(--opacity, 1);
    z-index: var(--z, 10);
    transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .55s ease, box-shadow .4s ease, border-color .4s ease;
    pointer-events: none;
}

.match-card.is-front {
    pointer-events: auto;
    box-shadow: 0 34px 70px rgb(30 63 119 / 18%);
    border-color: #d7e4f7;
}

/* 卡片头部：校徽 + 校名/国家 + 标签 */
.match-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.match-card__school-main { display: flex; align-items: center; gap: 12px; }

.match-card__logo {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--home-brand);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.match-card__name {
    display: block;
    color: #1c2940;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.match-card__country {
    display: block;
    margin-top: 2px;
    color: #8b97a9;
    font-size: 11px;
}

.match-card__tag {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.match-card__tag--strong { color: #11855f; background: #e6f7f1; }
.match-card__tag--likely { color: #11855f; background: #e6f7f1; }
.match-card__tag--possible { color: #b77912; background: #fff8ea; }
.match-card__tag--safe { color: #1e62d9; background: #edf4ff; }

/* 项目名 */
.match-card__program { display: grid; gap: 7px; }

.match-card__degree {
    justify-self: flex-start;
    padding: 5px 10px;
    border-radius: 999px;
    color: #5d6f8b;
    background: #f3f6fb;
    font-size: 11px;
    font-weight: 650;
}

.match-card__major {
    margin: 0;
    color: #17233a;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.25;
}

/* 三项数据 */
.match-card__stats {
    display: flex;
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid #eef2f8;
    border-bottom: 1px solid #eef2f8;
    gap: 0;
    list-style: none;
}

.match-card__stats li {
    flex: 1 1 0;
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
}
.match-card__stats li + li { border-left: 1px solid #eef2f8; }

.match-card__stat-value {
    color: #17233a;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.match-card__stats small { color: #8b97a9; font-size: 11px; font-weight: 500; }

.match-card__stat-value--admit { color: #19b98b; }
.match-card__stat-value--scholar { color: #f0a92d; }
.match-card__stat-value--compete { color: #ec4c6a; }
.match-card__stat-value--compete--low { color: #19b98b; }
.match-card__stat-value--tier-safe { color: #1e62d9; }
.match-card__stat-value--tier-ideal { color: #19b98b; }
.match-card__stat-value--tier-reach { color: #ec4c6a; }

/* 选校结论：可解释文案块 */
.match-card__verdict {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #f5f8fc;
    border-left: 3px solid #1e62d9;
    border-radius: 8px;
    color: #44516a;
    font-size: 12.5px;
    line-height: 1.5;
}

/* 底部学费/入学/学制 */
.match-card__meta {
    display: grid;
    margin: 0;
    gap: 8px;
}

.match-card__meta > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.match-card__meta dt { color: #8b97a9; font-weight: 500; }
.match-card__meta dd { margin: 0; color: #27344a; font-weight: 700; }

/* 导航点 + 箭头：默认隐藏，悬停显现 */
.match-cards__nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.match-cards.is-hover .match-cards__nav { opacity: 1; transform: none; pointer-events: auto; }
.match-cards__dots { display: flex; gap: 8px; }
.match-cards__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c4d2e8;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.match-cards__dot.is-active { background: var(--home-brand); transform: scale(1.35); }
.match-cards__arrow {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #dbe6f6;
    border-radius: 50%;
    background: #fff;
    color: #46608c;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgb(30 63 119 / 12%);
    transition: border-color .2s ease, color .2s ease;
}
.match-cards__arrow:hover { border-color: var(--home-brand); color: var(--home-brand); }

.landing-capabilities { padding: 104px max(32px, calc((100% - 1280px) / 2)); }
.landing-section__heading { display: grid; justify-items: start; gap: 10px; margin-bottom: 42px; }
.landing-section__heading .page-eyebrow { max-width: 190px; margin: 0; }

.landing-section__heading h2 {
    max-width: 650px;
    margin: 0;
    color: #17233a;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.35;
    text-align: left;
}

.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

@media (max-width: 720px) {
    .capability-grid { grid-template-columns: 1fr; }
    .capability-card { min-height: 0; }
}

.capability-card {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    padding: 31px 30px;
    border: 1px solid #e1e8f2;
    border-radius: 18px;
    background: #fbfcff;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.capability-card:hover { border-color: #c9d9f4; box-shadow: 0 20px 44px rgb(35 66 120 / 9%); transform: translateY(-4px); }
.capability-card__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: var(--home-brand); background: #edf4ff; }
.capability-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.capability-card__number { position: absolute; top: 34px; right: 30px; color: #c8d0dc; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.capability-card h3 { margin: 24px 0 9px; color: #1b2940; font-size: 20px; }
.capability-card > p { max-width: 300px; margin: 0; color: #758198; font-size: 13px; line-height: 1.75; }
.capability-card__visual { position: absolute; right: 30px; bottom: 28px; left: 30px; }

/* 01 资料只整理一次 —— 散落文件收拢为一叠 */
.capability-card__visual--files { height: 108px; }
.demo-files { position: absolute; right: 0; bottom: 0; left: 0; height: 100%; }
.demo-file {
    position: absolute;
    left: 50%;
    bottom: 4px;
    display: flex;
    align-items: center;
    width: 152px;
    height: 46px;
    margin-left: -76px;
    padding: 0 16px;
    border: 1px solid #dce6f5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 22px rgb(31 68 132 / 9%);
    color: #5d6f8b;
    font-size: 11px;
    font-weight: 650;
    transform: var(--scatter);
    animation: fileGather 4.4s ease-in-out infinite;
}
.demo-file--a { z-index: 3; }
.demo-file--b { bottom: 18px; z-index: 2; background: #f8faff; }
.demo-file--c { bottom: 32px; z-index: 1; background: #f0f5ff; }
.demo-file--a { --scatter: translate(-46px, 18px) rotate(-12deg); }
.demo-file--b { --scatter: translate(48px, 10px) rotate(9deg); }
.demo-file--c { --scatter: translate(-28px, -26px) rotate(-6deg); }
@keyframes fileGather {
    0%, 12% { transform: var(--scatter); opacity: .92; }
    42%, 78% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: var(--scatter); opacity: .92; }
}

/* 02 下一步一眼看懂 —— 当前任务高亮脉冲 */
.capability-card__visual--task {
    display: grid;
    gap: 7px;
    padding: 14px 16px;
    border: 1px solid #cfe0ff;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f6ff, #fff);
    box-shadow: 0 12px 24px rgb(36 107 253 / 8%);
}
.demo-task__label { color: var(--home-brand); font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.demo-task__row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; color: #5b6b85; font-size: 11px; }
.demo-task__row i { width: 13px; height: 13px; flex: none; border: 2px solid #cdd9ee; border-radius: 50%; }
.demo-task__row--done i { border-color: #19b98b; background: #19b98b; box-shadow: inset 0 0 0 2px #fff; }
.demo-task__row--done span { color: #9aa7bd; text-decoration: line-through; }
.demo-task__row--active { color: #1f3a66; font-weight: 650; background: #eaf2ff; box-shadow: 0 0 0 1px #bcd4ff; animation: taskPulse 2.6s ease-in-out infinite; }
.demo-task__row--active i { border-color: var(--home-brand); background: var(--home-brand); }
.demo-task__row--active em { margin-left: auto; font-style: normal; font-size: 9px; color: #6f8bc4; }
.demo-task__row--next span { color: #aeb9cc; }
@keyframes taskPulse {
    0%, 100% { box-shadow: 0 0 0 1px #bcd4ff; }
    50% { box-shadow: 0 0 0 4px rgb(54 122 253 / 18%); }
}

/* 03 每次变化有依据 —— 最新记录落档、绿点回响 */
.capability-card__visual--trace {
    display: grid;
    gap: 9px;
    padding: 13px 15px;
    border: 1px solid #dbe9e5;
    border-radius: 12px;
    background: #f6fcfa;
}
.demo-trace__entry { display: flex; align-items: center; gap: 10px; }
.demo-trace__entry i { width: 11px; height: 11px; flex: none; border: 3px solid #fff; border-radius: 50%; background: #19b98b; box-shadow: 0 0 0 3px #c9efe3; }
.demo-trace__entry > div { display: grid; gap: 2px; }
.demo-trace__entry strong { color: #2c463e; font-size: 11px; }
.demo-trace__entry small { color: #7f9a91; font-size: 9px; }
.demo-trace__entry--new i { animation: tracePing 2.8s ease-in-out infinite; }
.demo-trace__entry--new .demo-tag {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: #19b98b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    animation: tagBlink 2.8s ease-in-out infinite;
}
@keyframes tracePing {
    0%, 100% { box-shadow: 0 0 0 3px #c9efe3; }
    50% { box-shadow: 0 0 0 7px rgb(25 185 139 / 20%); }
}
@keyframes tagBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
    .demo-file,
    .demo-task__row--active,
    .demo-trace__entry--new i,
    .demo-trace__entry--new .demo-tag { animation: none !important; }
    .demo-file { transform: translate(0, 0) rotate(0) !important; }
}

.landing-journey {
    display: grid;
    margin: 0 max(32px, calc((100% - 1280px) / 2));
    padding: 65px 68px;
    grid-template-columns: 330px 1fr;
    align-items: center;
    gap: 72px;
    border-radius: 22px;
    color: #fff;
    background: radial-gradient(circle at 8% 16%, rgb(86 142 255 / 34%), transparent 28%), linear-gradient(125deg, #102d67, #1246a7 62%, #246bfd);
    box-shadow: 0 24px 55px rgb(17 59 139 / 18%);
}

.landing-journey .page-eyebrow { margin-bottom: 12px; color: #aecdff; }
.landing-journey__intro h2 { margin: 0; font-size: 32px; letter-spacing: -.035em; }
.landing-journey__intro > p:not(.page-eyebrow) { margin: 12px 0 0; color: #c8d9fa; font-size: 13px; }
.landing-journey__intro a { display: inline-flex; align-items: center; gap: 9px; margin-top: 23px; color: #fff; font-size: 13px; font-weight: 650; }
.landing-journey__intro a:hover { text-decoration: underline; }
.journey-list { position: relative; display: grid; margin: 0; padding: 0; grid-template-columns: repeat(4, 1fr); list-style: none; }
.journey-list::before { position: absolute; top: 18px; right: 10%; left: 10%; height: 1px; background: rgb(255 255 255 / 24%); content: ""; }
.journey-list li { position: relative; display: grid; justify-items: center; gap: 14px; }
.journey-list span { z-index: 1; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgb(255 255 255 / 38%); border-radius: 50%; color: #fff; background: #194eae; font-size: 10px; font-weight: 700; }
.journey-list li:first-child span { color: #1754c0; background: #fff; }
.journey-list strong { font-size: 12px; font-weight: 600; }

.landing-cta {
    position: relative;
    display: flex;
    min-height: 250px;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    margin: 96px max(32px, calc((100% - 1280px) / 2));
    padding: 54px 64px;
    border: 1px solid #dce6f5;
    border-radius: 20px;
    background: linear-gradient(115deg, #f5f9ff, #fff 64%);
}

.landing-cta__decoration { position: absolute; top: -128px; right: -72px; width: 340px; height: 340px; border: 54px solid rgb(36 107 253 / 5%); border-radius: 50%; }
.landing-cta > div:not(.landing-cta__decoration) { position: relative; z-index: 1; }
.landing-cta .page-eyebrow { margin-bottom: 12px; }
.landing-cta h2 { max-width: 650px; margin: 0; color: #17233a; font-size: 32px; letter-spacing: -.035em; }
.landing-cta__actions { display: flex; align-items: center; gap: 22px; }

@media (max-width: 1280px) {
    .landing-hero__inner { grid-template-columns: minmax(0, .94fr) minmax(500px, 1fr); gap: 42px; }
    .landing-hero__title { font-size: 46px; }
    .workspace-preview__floating-card { right: 6px; }
    .workspace-preview { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) scale(.9); }
    .landing-journey { padding-right: 48px; padding-left: 48px; grid-template-columns: 290px 1fr; gap: 42px; }
    .landing-match { padding-top: 96px; padding-bottom: 108px; }
    .landing-match__inner { grid-template-columns: 520px minmax(0, 1fr); gap: 52px; }
    .landing-match__content { max-width: 520px; }
    .landing-match h2 { font-size: 48px; }
    .match-cards { height: 340px; }
    .match-card { width: min(300px, 86%); }
}

@media (prefers-reduced-motion: reduce) { .workspace-preview { transform: none; } }

/* 申请工作台：动态状态演示 */
.application-demo {
    position: relative;
    width: min(100%, 640px);
    margin: 0 auto;
    overflow: visible;
    border: 1px solid #dce7f7;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 70px rgb(30 63 119 / 16%);
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
    transition: transform .45s ease, box-shadow .45s ease;
}
.application-demo:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-4px); box-shadow: 0 38px 84px rgb(30 63 119 / 20%); }
.application-demo::after { position: absolute; right: -28px; bottom: -28px; z-index: -1; width: 72%; height: 72%; border-radius: 28px; background: linear-gradient(145deg, #dceaff, #f4f8ff); content: ""; }
.application-demo__chrome { display: flex; height: 44px; align-items: center; gap: 7px; padding: 0 17px; border-bottom: 1px solid #edf1f7; border-radius: 24px 24px 0 0; background: #fbfcff; }
.application-demo__chrome i { width: 7px; height: 7px; border-radius: 50%; background: #d7dfec; }
.application-demo__chrome span { margin-left: 9px; color: #9aa6b8; font-size: 9px; letter-spacing: .02em; }
.application-demo__body { display: grid; min-height: 372px; grid-template-columns: 70px 1fr; }
.application-demo__rail { display: flex; align-items: center; padding: 20px 0; border-right: 1px solid #edf1f7; border-radius: 0 0 0 24px; background: #f8faff; flex-direction: column; gap: 14px; }
.application-demo__brand { display: grid; width: 34px; height: 34px; margin-bottom: 15px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #5c96ff, #246bfd); box-shadow: 0 8px 16px rgb(36 107 253 / 22%); font-size: 14px; font-weight: 800; }
.application-demo__rail b { display: block; width: 28px; height: 28px; border-radius: 9px; background: #e9f2ff; box-shadow: inset 4px 0 0 #246bfd; }
.application-demo__rail i { display: block; width: 22px; height: 6px; border-radius: 4px; background: #d7dfeb; }
.application-demo__content { padding: 24px 27px 25px; background: linear-gradient(180deg, #fff 0%, #fcfdff 100%); }
.application-demo__topline { display: flex; align-items: flex-end; justify-content: space-between; }
.application-demo__kicker { display: block; margin-bottom: 4px; color: #9aa6b7; font-size: 9px; }
.application-demo__topline h3 { margin: 0; color: #1b2940; font-size: 18px; letter-spacing: -.03em; }
.application-demo__live { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: #1d8e71; background: #e9f8f3; font-size: 9px; font-weight: 700; }
.application-demo__live i { width: 6px; height: 6px; border-radius: 50%; background: #21bf91; box-shadow: 0 0 0 4px rgb(33 191 145 / 12%); animation: applicationDemoLive 1.8s ease-in-out infinite; }
.application-demo__hero { position: relative; display: flex; min-height: 116px; align-items: center; justify-content: space-between; overflow: hidden; margin-top: 18px; padding: 20px 22px; border-radius: 16px; color: #fff; background: linear-gradient(118deg, #174fbf 0%, #347eff 70%, #6aa5ff 100%); box-shadow: 0 16px 30px rgb(36 107 253 / 20%); }
.application-demo__hero::after { position: absolute; top: -45%; left: -35%; width: 24%; height: 190%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 18%), transparent); content: ""; transform: skewX(-18deg); animation: applicationDemoSweep 4.8s ease-in-out infinite; pointer-events: none; }
.application-demo__hero-copy { display: grid; gap: 7px; }
.application-demo__hero-copy span, .application-demo__hero-copy small { color: #dbe8ff; font-size: 9px; }
.application-demo__hero-copy strong { font-size: 18px; letter-spacing: -.02em; }
.application-demo__ring { position: relative; display: grid; width: 70px; height: 70px; place-items: center; }
.application-demo__ring svg { position: absolute; inset: 0; width: 70px; height: 70px; transform: rotate(-90deg); }
.application-demo__ring circle { fill: none; stroke-width: 5; }
.application-demo__ring .track { stroke: rgb(255 255 255 / 28%); }
.application-demo__ring .value { stroke: #fff; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 125; transition: stroke-dashoffset .75s cubic-bezier(.22, 1, .36, 1); }
.application-demo__ring strong { position: relative; font-size: 14px; }
.application-demo__grid { display: grid; margin-top: 16px; grid-template-columns: 1.14fr .86fr; gap: 12px; }
.application-demo__panel { min-height: 130px; padding: 14px 15px; border: 1px solid #e7edf6; border-radius: 14px; background: #fff; }
.application-demo__panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #24334b; font-size: 10px; font-weight: 750; }
.application-demo__panel-title small { color: #9aa6b7; font-size: 8px; font-weight: 500; }
.application-demo__timeline { position: relative; display: grid; gap: 10px; }
.application-demo__timeline::before { position: absolute; top: 6px; bottom: 6px; left: 4px; width: 1px; background: #e4ebf5; content: ""; }
.application-demo__event { position: relative; display: grid; padding: 4px 7px 4px 0; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; border-radius: 8px; transition: background .45s ease, transform .45s ease, padding .45s ease; }
.application-demo__event i { z-index: 1; width: 9px; height: 9px; border: 2px solid #cdd8e8; border-radius: 50%; background: #fff; }
.application-demo__event.is-done i { border-color: #20b98d; background: #20b98d; box-shadow: 0 0 0 3px #e9f8f3; }
.application-demo__event.is-current { padding-left: 7px; background: #f3f7ff; transform: translateX(4px); animation: applicationDemoSelected 2.4s ease-in-out infinite; }
.application-demo__event.is-current i { border-color: #246bfd; background: #fff; box-shadow: 0 0 0 3px #e5efff; animation: applicationDemoNodePulse 1.8s ease-in-out infinite; }
.application-demo__event strong { color: #42516a; font-size: 9px; font-weight: 650; transition: color .35s ease; }
.application-demo__event.is-current strong { color: #2465d8; }
.application-demo__event small { color: #a0aabb; font-size: 8px; }
.application-demo__task { display: grid; gap: 9px; }
.application-demo__task-row { display: flex; align-items: center; gap: 8px; padding: 3px 5px; border-radius: 7px; color: #69778e; font-size: 8px; transition: background .45s ease, color .45s ease, transform .45s ease; }
.application-demo__task-row b { display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid #d7e0ed; border-radius: 5px; color: transparent; font-size: 9px; }
.application-demo__task-row.is-done b { border-color: #bdebdc; color: #16926e; background: #e9f8f3; }
.application-demo__task-row.is-current { color: #2465d8; background: #f0f6ff; font-weight: 700; transform: translateX(3px); animation: applicationDemoSelected 2.4s ease-in-out infinite; }
.application-demo__task-row.is-current b { border-color: #8db8ff; background: #edf4ff; box-shadow: 0 0 0 3px #f2f7ff; animation: applicationDemoNodePulse 1.8s ease-in-out infinite; }
.application-demo__task-row em { margin-left: auto; color: #a1acbd; font-size: 8px; font-style: normal; }
.application-demo__toast { position: absolute; right: 20px; bottom: -22px; z-index: 5; display: flex; min-width: 194px; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #dbe7f5; border-radius: 14px; background: rgb(255 255 255 / 96%); box-shadow: 0 18px 38px rgb(30 63 119 / 17%); backdrop-filter: blur(10px); animation: applicationDemoToast 6s ease-in-out infinite; }
.application-demo__toast > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #20b98d; font-size: 12px; }
.application-demo__toast div { display: grid; gap: 3px; }
.application-demo__toast strong { color: #27354d; font-size: 10px; }
.application-demo__toast small { color: #8b97aa; font-size: 8px; }
.application-demo.is-switching .application-demo__hero-copy, .application-demo.is-switching .application-demo__grid { animation: applicationDemoSwap .65s ease both; }
@keyframes applicationDemoLive { 0%, 100% { opacity: .65; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes applicationDemoSweep { 0%, 18% { left: -35%; opacity: 0; } 28% { opacity: 1; } 60%, 100% { left: 125%; opacity: 0; } }
@keyframes applicationDemoSelected { 0%, 100% { box-shadow: inset 0 0 0 1px rgb(36 107 253 / 0%); } 50% { box-shadow: inset 0 0 0 1px rgb(36 107 253 / 15%), 0 5px 14px rgb(36 107 253 / 7%); } }
@keyframes applicationDemoNodePulse { 0%, 100% { box-shadow: 0 0 0 3px #e5efff; } 50% { box-shadow: 0 0 0 7px rgb(36 107 253 / 15%); } }
@keyframes applicationDemoToast { 0%, 44%, 100% { opacity: 0; transform: translateY(12px); } 53%, 82% { opacity: 1; transform: translateY(0); } }
@keyframes applicationDemoSwap { 0% { opacity: .35; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } }

/* 能力卡片：统一入场和悬停层次 */
.capability-card { isolation: isolate; background: linear-gradient(145deg, #fbfcff 0%, #f7faff 100%); animation: capabilityReveal .72s cubic-bezier(.22, 1, .36, 1) both; }
.capability-card:nth-child(2) { animation-delay: .12s; }
.capability-card:nth-child(3) { animation-delay: .24s; }
.capability-card::before { position: absolute; top: -80px; right: -70px; z-index: -1; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgb(91 150 255 / 13%), transparent 68%); content: ""; opacity: .65; transition: transform .55s ease, opacity .55s ease; }
.capability-card:nth-child(3)::before { background: radial-gradient(circle, rgb(38 190 145 / 13%), transparent 68%); }
.capability-card:hover::before { opacity: 1; transform: scale(1.25); }
.capability-card__icon { position: relative; transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, background .45s ease; }
.capability-card__icon::after { position: absolute; inset: -5px; border: 1px solid rgb(36 107 253 / 0%); border-radius: 16px; content: ""; transition: border-color .45s ease, transform .45s ease; }
.capability-card:hover .capability-card__icon { background: #e5efff; box-shadow: 0 8px 18px rgb(36 107 253 / 15%); transform: translateY(-3px) rotate(-3deg); }
.capability-card:hover .capability-card__icon::after { border-color: rgb(36 107 253 / 18%); transform: scale(1.08); }
.capability-card__visual { transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .55s ease; }
.capability-card:hover .capability-card__visual { filter: saturate(1.08); transform: translateY(-6px) scale(1.025); }
.capability-card:hover .capability-card__number { color: #9cb8e7; }
@keyframes capabilityReveal { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
    .landing-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .landing-hero__content { grid-column: 1; order: 2; padding-bottom: 0; text-align: left; }
    .landing-hero__lead { margin-right: 0; margin-left: 0; }
    .landing-hero__actions, .landing-hero__assurances { justify-content: flex-start; }
    .application-demo { grid-column: 1; width: min(100%, 640px); margin: 0 auto; transform: none; }
    .landing-hero__proof { min-height: 0; flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 0; }
    .landing-hero__proof ul { flex-wrap: wrap; gap: 12px 18px; }
    .landing-hero__proof li:not(:first-child)::before { margin: 0 10px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .application-demo,
    .application-demo__hero::after,
    .application-demo__live i,
    .application-demo__event.is-current,
    .application-demo__event.is-current i,
    .application-demo__task-row.is-current,
    .application-demo__toast,
    .application-demo.is-switching .application-demo__hero-copy,
    .application-demo.is-switching .application-demo__grid,
    .capability-card { animation: none !important; transition: none !important; }
}
