.coverage-viewport {
    overflow: visible;
}

.coverage-pagination,
.footer-mobile-title {
    display: none;
}

.btn-hero-mobile {
    display: none;
}

.feature-copy-mobile-break {
    display: none;
}

.hamburger {
    padding: 0;
    border: 0;
    background: transparent;
}

.coverage-slide-clone {
    display: none;
}

/* Hero 文案与统计共用一份结构；桌面端用网格将文案叠回视频。 */
.hero-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 100vh auto;
}

.hero-stats > .hero {
    grid-area: 1 / 1;
    height: auto;
    min-height: 0;
    padding-bottom: 0;
}

.hero-info {
    display: contents;
}

.hero-info > .hero-content {
    grid-area: 1 / 1;
    align-self: end;
    width: 100%;
    margin-bottom: clamp(50px, 5.208vw, 100px);
}

.hero-info > .stats {
    grid-area: 2 / 1;
}

@media (max-width: 968px) {
    .hero-info > .hero-content {
        margin-bottom: 0;
    }
}

@media (min-width: 769px) and (max-width: 968px) {
    .hero-info > .hero-content {
        margin-bottom: 32px;
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    :root {
        --mobile-page-padding: 16px;
        --mobile-content-width: 430px;
        --mobile-navy: #061d6e;
    }

    html {
        scroll-padding-top: 56px;
    }

    body {
        min-width: 320px;
        background: #081832;
    }

    .container {
        width: 100%;
        max-width: none;
        padding-right: var(--mobile-page-padding);
        padding-left: var(--mobile-page-padding);
    }

    .subpage .feature-copy .feature-copy-mobile-break {
        display: inline;
    }

    .hero-stats {
        display: block;
        background: none;
    }

    .hero-info {
        display: block;
        background: #fff url('../img/hero/6_01.webp') center / cover no-repeat;
    }

    .navbar {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: none;
        height: 56px;
        padding: 0 16px;
        transform: none;
        border-radius: 0;
        background: #fff !important;
        box-shadow: none !important;
        backdrop-filter: none;
    }

    .navbar .container {
        height: 100%;
    }

    .logo,
    .logo a,
    .logo-picture {
        display: flex;
        align-items: center;
    }

    .logo-img {
        width: 82px;
        height: 34px;
        object-fit: contain;
        transform: none;
    }

    .hamburger {
        display: flex;
        width: 44px;
        height: 44px;
        padding: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .hamburger span {
        width: 22px;
        height: 2px;
        margin: 2.5px 0;
        background: #161616;
        border-radius: 2px;
    }

    .nav-menu {
        position: absolute;
        top: 56px;
        right: 0;
        left: 0;
        width: 100%;
        padding: 10px 16px 16px;
        gap: 0;
        align-items: stretch;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 14px 30px rgba(4, 20, 56, 0.16);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .nav-menu.active {
        left: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-menu > li > a,
    .nav-menu > li > .nav-dropdown-toggle {
        display: flex;
        width: 100%;
        padding: 11px 8px;
        align-items: center;
        justify-content: center;
        color: #15203c;
        font-size: 15px;
    }

    .nav-menu .contact-link {
        color: #ff5b1a;
    }

    .nav-dropdown .dropdown {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #f3f6fc;
        border-radius: 6px;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: none;
        transition: max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease, opacity 0.2s ease, visibility 0.2s;
    }

    .nav-dropdown.is-open .dropdown {
        max-height: 360px;
        margin: 2px 0 6px;
        padding: 4px 0;
        opacity: 1;
        visibility: visible;
    }

    .nav-dropdown .dropdown a {
        padding: 10px 8px;
        color: #34405c !important;
        font-size: 14px;
        text-align: center;
    }

    .hero {
        display: block;
        height: auto;
        min-height: 0;
        padding: 0;
        overflow: visible;
        background: transparent;
    }

    .hero-video {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: clamp(220px, 64vw, 360px);
        object-fit: cover;
        object-position: center;
    }

    .hero-overlay {
        display: none;
    }

    .hero-content {
        max-width: 560px;
        margin-bottom: 0;
        padding: 26px var(--mobile-page-padding) 18px;
        color: #171717;
        text-align: left;
        background: transparent;
    }

    .hero-title {
        margin-bottom: 10px;
        color: #171717;
        font-size: 24px;
        line-height: 1.35;
        text-shadow: none;
    }

    .hero-desc {
        margin-bottom: 18px;
        color: #353535;
        font-size: 15px;
        line-height: 1.75;
    }

    .hero-desc-mobile-divider {
        display: inline;
    }

    .hero-desc br {
        display: none;
    }

    .hero-content .btn-hero {
        display: none;
    }

    .stats .btn-hero-mobile {
        display: flex;
        width: min(230px, 76vw);
        min-height: 40px;
        margin: 12px auto 0;
        padding: 8px 22px;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .stats {
        padding: 0 0 20px;
        background: transparent;
    }

    .stats .container {
        max-width: var(--mobile-content-width);
        padding: 0 12px;
    }

    .stats-wrapper,
    .stats .stats-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-item,
    .stats .stat-item {
        width: auto;
        max-width: none;
        min-height: 68px;
        margin: 0;
        padding: 8px 4px;
        border: 0 !important;
    }

    .stat-prefix,
    .stat-unit {
        font-size: 14px;
    }

    .stat-prefix {
        margin-right: 3px;
    }

    .stat-unit {
        margin-left: 3px;
    }

    .stat-number {
        font-size: 30px;
    }

    .stat-label {
        margin-top: 5px;
        font-size: 13px;
        white-space: normal;
    }

    .main-content-background {
        display: flex;
        flex-direction: column;
        background-color: var(--mobile-navy);
        background-position: center top;
        background-size: auto 100%;
    }

    .main-content-background .coverage {
        order: 1;
    }

    .main-content-background .results {
        order: 2;
    }

    .main-content-background .energy {
        order: 3;
    }

    .section-title,
    .results .section-title,
    .energy .section-title {
        width: min(100%, 340px);
        margin: 0 auto;
        color: #fff;
        font-size: 24px;
        line-height: 1.25;
        white-space: normal;
    }

    .section-divider {
        margin: 0 0 20px;
    }

    .section-divider img {
        width: min(100%, 350px);
        max-width: none;
        margin-top: -2px;
    }

    .coverage {
        padding: 34px 0 28px;
    }

    .coverage .container {
        max-width: calc(var(--mobile-content-width) + 32px);
    }

    .coverage-viewport {
        width: 100%;
        overflow: hidden;
        border-radius: 12px;
        touch-action: pan-y;
    }

    .coverage-images {
        display: flex;
        width: 100%;
        gap: 0;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        flex-direction: row;
        transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: transform;
    }

    .coverage-images.is-jumping {
        transition: none;
    }

    .coverage-flip-card,
    .coverage-flip-card:hover {
        width: 100%;
        min-width: 100%;
        flex: 0 0 100%;
        transform: none;
    }

    .coverage-slide-clone {
        display: block;
    }

    .flip-card-inner {
        height: 318px;
        border-radius: 12px;
        box-shadow: none;
    }

    .coverage-flip-card:hover .flip-card-inner {
        box-shadow: none;
    }

    .flip-card-front {
        display: none;
    }

    .flip-card-back,
    .coverage-flip-card:hover .flip-card-back {
        position: relative;
        inset: auto;
        min-height: 100%;
        align-items: stretch;
        opacity: 1;
        border-radius: 12px;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right center;
        background-size: auto 82%;
    }

    .coverage-flip-card#resume .flip-card-back {
        background-image: linear-gradient(90deg, #fff 0%, #fff 59%, rgba(255,255,255,0.4) 84%), url('../img/coverage/coverage-card-1.webp');
    }

    .coverage-flip-card#chat .flip-card-back {
        background-image: linear-gradient(90deg, #fff 0%, #fff 59%, rgba(255,255,255,0.4) 84%), url('../img/coverage/coverage-card-2.webp');
    }

    .coverage-flip-card#interview .flip-card-back {
        background-image: linear-gradient(90deg, #fff 0%, #fff 59%, rgba(255,255,255,0.4) 84%), url('../img/coverage/coverage-card-3.webp');
    }

    .coverage-flip-card#replay .flip-card-back {
        background-image: linear-gradient(90deg, #fff 0%, #fff 59%, rgba(255,255,255,0.4) 84%), url('../img/coverage/coverage-card-4.webp');
    }

    .coverage-flip-card#report .flip-card-back {
        background-image: linear-gradient(90deg, #fff 0%, #fff 59%, rgba(255,255,255,0.4) 84%), url('../img/coverage/coverage-card-5.webp');
    }

    .card-content {
        position: relative;
        z-index: 1;
        width: 74%;
        padding: 30px 12px 26px 22px;
    }

    .card-content h3 {
        margin-bottom: 15px;
        color: #131313;
        font-size: 20px;
        line-height: 1.35;
    }

    .card-content p {
        margin-bottom: 17px;
        color: #343434;
        font-size: 14px;
        line-height: 1.75;
    }

    .card-link {
        color: #0c62ff;
        font-size: 15px;
    }

    .coverage-pagination {
        display: flex;
        min-height: 34px;
        margin-top: 12px;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .coverage-pagination button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #fff;
        cursor: pointer;
        transition: width 0.25s ease, background-color 0.25s ease;
    }

    .coverage-pagination button.is-active {
        width: 36px;
        background: #ff6b35;
    }

    .coverage-pagination button:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }

    .results {
        padding: 24px 0 34px;
    }

    .results .container {
        max-width: calc(var(--mobile-content-width) + 32px);
        padding: 0 var(--mobile-page-padding);
    }

    .result-cards {
        gap: 16px;
    }

    .result-card-wrapper,
    .result-card-wrapper:hover {
        width: 100%;
        overflow: hidden;
        border-radius: 12px;
        transform: none !important;
        background: #fff;
        box-shadow: none;
    }

    .result-card-bg {
        height: 170px;
        border-radius: 0;
        object-fit: cover;
        object-position: right center;
        box-shadow: none;
    }

    .result-card-wrapper:hover .result-card-bg {
        box-shadow: none !important;
    }

    .result-card-overlay {
        padding: 16px 18px 20px;
    }

    .result-card-overlay h3 {
        margin-bottom: 10px;
        color: #151515;
        font-size: 18px;
        line-height: 1.45;
    }

    .result-card-overlay .desc {
        margin-bottom: 12px;
        color: #4a4a4a;
        font-size: 14px;
        line-height: 1.7;
    }

    .result-card-overlay .desc br {
        display: none;
    }

    .result-card-overlay .cta-btn {
        display: flex;
        flex-direction: column;
        min-height: 44px;
        max-width: 275px;
        padding: 8px 18px;
        justify-content: center;
        align-items: flex-end;
        font-size: 16px;
    }

    .result-card-overlay .cta-label {
        display: grid;
        grid-template-columns: max-content max-content;
        grid-template-areas:
            "prefix title"
            ". benefit";
        align-items: baseline;
        text-align: right;
        white-space: nowrap;
    }

    .result-card-overlay .cta-prefix {
        grid-area: prefix;
    }

    .result-card-overlay .cta-trial-title {
        grid-area: title;
    }

    .result-card-overlay .trial-benefit {
        grid-area: benefit;
        justify-self: center;
        width: auto;
        flex: 0 0 auto;
        font-size: 9px;
        text-align: center;
        white-space: nowrap;
    }

    .agent-title img,
    .result-card-wrapper:nth-child(2) .agent-title img {
        width: 25px;
        height: 25px;
    }

    .energy {
        padding: 34px 0 26px;
        content-visibility: visible;
    }

    .energy .container {
        padding: 0 6px;
    }

    .energy .section-divider {
        margin-bottom: 0;
    }

    .energy-layout {
        position: relative;
        display: block;
        width: 100%;
        max-width: 560px;
        height: auto;
        aspect-ratio: 375 / 500;
        margin: 0 auto;
        overflow: hidden;
        isolation: isolate;
    }

    .energy-layout::before {
        display: block;
        inset: 0;
        background:
            radial-gradient(circle at 50% 50%, rgba(65, 126, 255, 0.34), transparent 34%),
            linear-gradient(rgba(91, 169, 255, 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(91, 169, 255, 0.08) 1px, transparent 1px);
        background-size: 100% 100%, 28px 28px, 28px 28px;
        opacity: 0.72;
    }

    .energy-linework {
        display: none;
    }

    .energy-cards {
        position: absolute;
        inset: 0;
        display: block;
    }

    .center-video {
        position: absolute;
        top: 49%;
        left: 50%;
        width: 36%;
        max-width: none;
        gap: 5px;
        transform: translate(-50%, -50%);
    }

    .video-frame {
        /* AI 面试官素材为 812:626，避免 contain 在移动端产生错位留白。 */
        aspect-ratio: 812 / 626;
        border-width: 2px;
        border-radius: 8px;
    }

    .center-video-label {
        font-size: 12px;
    }

    .candidate-card,
    .candidate-card:nth-of-type(8),
    .candidate-card:nth-of-type(11) {
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: 14.5%;
        animation: none;
        transform: translate(-50%, -50%);
    }

    .candidate-card:hover {
        transform: translate(-50%, -50%);
    }

    .energy .candidate-card.animate-on-scroll,
    .energy .candidate-card.animate-on-scroll.is-visible {
        transform: translate(-50%, -50%);
    }

    .card-frame {
        border-radius: 5px;
        background: #071b54;
    }

    .energy .card-frame video {
        object-fit: contain;
        object-position: center;
        transform: none;
        background: #071b54;
    }

    .energy .main-gif {
        /* 素材边缘有极少量安全留白，放大后可填满外层边框。 */
        object-fit: cover;
        object-position: center;
        transform: scale(1.03);
        background: #071b54;
    }

    .energy .card-label {
        font-size: 5px !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .candidate-card:nth-of-type(1)  { --x: 8%;  --y: 16%; }
    .candidate-card:nth-of-type(2)  { --x: 8%;  --y: 47%; }
    .candidate-card:nth-of-type(3)  { --x: 8%;  --y: 78%; }
    .candidate-card:nth-of-type(4)  { --x: 23%; --y: 25%; }
    .candidate-card:nth-of-type(5)  { --x: 23%; --y: 56%; }
    .candidate-card:nth-of-type(6)  { --x: 23%; --y: 86%; }
    .candidate-card:nth-of-type(7)  { --x: 38%; --y: 15%; }
    .candidate-card:nth-of-type(8)  { --x: 38%; --y: 72%; }
    .candidate-card:nth-of-type(9)  { --x: 50%; --y: 90%; }
    .candidate-card:nth-of-type(10) { --x: 62%; --y: 15%; }
    .candidate-card:nth-of-type(11) { --x: 62%; --y: 72%; }
    .candidate-card:nth-of-type(12) { --x: 77%; --y: 25%; }
    .candidate-card:nth-of-type(13) { --x: 77%; --y: 56%; }
    .candidate-card:nth-of-type(14) { --x: 77%; --y: 86%; }
    .candidate-card:nth-of-type(15) { --x: 92%; --y: 16%; }
    .candidate-card:nth-of-type(16) { --x: 92%; --y: 47%; }
    .candidate-card:nth-of-type(17) { --x: 92%; --y: 78%; }

    .process {
        padding: 30px 0 28px;
        background-color: #08236b;
        content-visibility: visible;
    }

    .process::before {
        background-position: center bottom;
    }

    .process .container {
        max-width: calc(var(--mobile-content-width) + 32px);
        gap: 0;
    }

    .process-wrapper {
        padding: 0;
        overflow: visible;
        border-radius: 0;
        background: none;
    }

    .process-wrapper:hover {
        transform: none;
        filter: none;
        box-shadow: none;
    }

    .process-title {
        margin-bottom: 18px;
        font-size: 22px;
        text-align: center;
    }

    .process-cards {
        gap: 8px;
    }

    .process-card {
        display: grid;
        min-height: 78px;
        padding: 12px 14px;
        grid-template-columns: 38px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 10px;
        text-align: left;
        border-radius: 6px;
        background: rgba(39, 108, 190, 0.62);
    }

    .process-card:hover {
        transform: none;
    }

    .process-icon {
        width: 30px;
        height: 30px;
        margin: 0;
        grid-row: 1;
        align-self: center;
    }

    .process-card h3 {
        margin: 0;
        align-self: center;
        font-size: 15px;
        line-height: 1.35;
    }

    .process-card p {
        grid-column: 1 / -1;
        font-size: 11px;
        line-height: 1.55;
    }

    .btn-process,
    .industry-news {
        display: none;
    }

    .footer {
        padding: 30px 0 18px;
        background: #081832;
    }

    .footer-mobile-title {
        display: block;
        margin: 0 0 15px;
        color: #fff;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
    }

    .footer-inner {
        display: flex;
        margin-bottom: 0;
        padding: 0 16px;
        align-items: center;
        flex-direction: column;
        gap: 0;
    }

    .footer-inner > .footer-col {
        display: none;
    }

    .footer-inner > .footer-col:last-child {
        display: block;
        order: 1;
    }

    .footer-inner > .footer-col:last-child h4,
    .footer-contact p {
        display: none;
    }

    .footer-contact {
        margin-top: 0;
    }

    .footer-contact img {
        width: 92px;
    }

    .footer-logo {
        width: 100%;
        margin: 0;
        order: 2;
        flex: 0 0 auto;
        text-align: center;
    }

    .footer-logo > img {
        display: none;
    }

    .footer-company {
        margin-top: 16px;
        font-size: 10px;
        line-height: 1.75;
    }

    .footer-legal {
        margin-top: 10px;
        padding: 0 16px;
        flex-direction: column;
        gap: 2px;
        font-size: 9px;
        line-height: 1.6;
    }

    body:not(.subpage) .process-title {
        font-size: 24px;
    }

    body:not(.subpage) .process-card h3 {
        font-size: 17px;
    }

    body:not(.subpage) .process-card p {
        font-size: 13px;
    }

    body:not(.subpage) .footer-mobile-title {
        font-size: 20px;
    }

    body:not(.subpage) .footer-company {
        font-size: 12px;
    }

    body:not(.subpage) .footer-legal {
        font-size: 11px;
    }
}

@media (max-width: 350px) {
    .flip-card-inner {
        height: 334px;
    }

    .card-content {
        width: 78%;
        padding-left: 18px;
    }

    .result-card-bg {
        height: 155px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .coverage-images,
    .coverage-pagination button {
        transition: none;
    }
}