@media (min-width: 768px) {
    body.home-mobile-single-article .proto-hero {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(245, 250, 255, 0.98) 0%, rgba(237, 247, 255, 0.98) 58%, rgba(231, 243, 252, 0.98) 100%);
    }

    body.home-mobile-single-article .proto-hero::before,
    body.home-mobile-single-article .proto-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    body.home-mobile-single-article .proto-hero::before {
        background:
            radial-gradient(circle at var(--hero-glow-x, 24%) var(--hero-glow-y, 30%), rgba(120, 194, 255, 0.16), transparent 0 32%),
            radial-gradient(circle at 82% 18%, rgba(148, 207, 255, 0.10), transparent 0 18%);
        opacity: 0.95;
        transition: background-position 0.25s ease, opacity 0.25s ease;
    }

    body.home-mobile-single-article .proto-hero::after {
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
            linear-gradient(90deg, rgba(71, 145, 255, 0.10) 1px, transparent 1px);
        background-size: 100% 32px, 32px 100%;
        opacity: 0.22;
        transform: perspective(1200px) translateY(-6%) scale(1.08);
        transform-origin: top center;
        animation: tech-grid-drift 18s linear infinite;
    }

    body.home-mobile-single-article .banner::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(108deg, transparent 14%, rgba(255, 255, 255, 0.14) 38%, transparent 62%);
        transform: translateX(-42%);
        animation: tech-scan 10s ease-in-out infinite;
    }

    body.home-mobile-single-article .banner-item .title,
    body.home-mobile-single-article .banner-item .desc {
        text-shadow: 0 10px 30px rgba(28, 91, 180, 0.08);
    }

    body.home-mobile-single-article .proto-tag-item,
    body.home-mobile-single-article .proto-tab-item,
    body.home-mobile-single-article .proto-btn-view,
    body.home-mobile-single-article .proto-btn-detail,
    body.home-mobile-single-article .proto-btn-view-detail,
    body.home-mobile-single-article .hover-btn {
        transition:
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.35s ease,
            color 0.3s ease,
            background-color 0.3s ease,
            border-color 0.3s ease;
    }

    body.home-mobile-single-article .proto-tag-item:hover,
    body.home-mobile-single-article .proto-tab-item:hover,
    body.home-mobile-single-article .proto-btn-view:hover,
    body.home-mobile-single-article .proto-btn-detail:hover,
    body.home-mobile-single-article .proto-btn-view-detail:hover,
    body.home-mobile-single-article .hover-btn:hover {
        transform: translateY(-2px);
    }

    body.home-mobile-single-article .proto-partner-logo,
    body.home-mobile-single-article .proto-partner-logo img {
        transition:
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.35s ease,
            opacity 0.35s ease;
        will-change: transform, filter;
    }

    body.home-mobile-single-article .proto-partner-logo[onclick] {
        cursor: pointer;
    }

    body.home-mobile-single-article .proto-partner-logo:hover {
        transform: none;
    }

    body.home-mobile-single-article .proto-partner-logo:hover img {
        transform: translateY(4px) scale(0.988);
        filter: none;
        opacity: 0.96;
    }


    body.home-mobile-single-article .proto-user-type-card,
    body.home-mobile-single-article .resource-card,
    body.home-mobile-single-article .proto-demand-card,
    body.home-mobile-single-article .proto-solution-card,
    body.home-mobile-single-article .proto-promotion-card,
    body.home-mobile-single-article .proto-os-card,
    body.home-mobile-single-article .proto-os-model-item,
    body.home-mobile-single-article .proto-os-component-item,
    body.home-mobile-single-article .proto-os-body-item,
    body.home-mobile-single-article .proto-os-doc-item,
    body.home-mobile-single-article .proto-os-community-item,
    body.home-mobile-single-article .proto-conference-card-new {
        position: relative;
        isolation: isolate;
        transform:
            perspective(1200px)
            translate3d(var(--card-shift-x, 0px), var(--card-shift-y, 0px), 0)
            rotateX(var(--card-tilt-x, 0deg))
            rotateY(var(--card-tilt-y, 0deg))
            scale(var(--card-scale, 1));
        transform-style: preserve-3d;
        transition:
            transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.42s ease,
            border-color 0.32s ease,
            background-color 0.32s ease;
        will-change: transform, box-shadow;
    }

    body.home-mobile-single-article .proto-user-type-card::before,
    body.home-mobile-single-article .resource-card::before,
    body.home-mobile-single-article .proto-demand-card::before,
    body.home-mobile-single-article .proto-solution-card::before,
    body.home-mobile-single-article .proto-promotion-card::before,
    body.home-mobile-single-article .proto-os-card::before,
    body.home-mobile-single-article .proto-os-model-item::before,
    body.home-mobile-single-article .proto-os-component-item::before,
    body.home-mobile-single-article .proto-os-body-item::before,
    body.home-mobile-single-article .proto-os-doc-item::before,
    body.home-mobile-single-article .proto-os-community-item::before,
    body.home-mobile-single-article .proto-conference-card-new::before,
    body.home-mobile-single-article .proto-user-type-card::after,
    body.home-mobile-single-article .resource-card::after,
    body.home-mobile-single-article .proto-demand-card::after,
    body.home-mobile-single-article .proto-solution-card::after,
    body.home-mobile-single-article .proto-promotion-card::after,
    body.home-mobile-single-article .proto-os-card::after,
    body.home-mobile-single-article .proto-os-model-item::after,
    body.home-mobile-single-article .proto-os-component-item::after,
    body.home-mobile-single-article .proto-os-body-item::after,
    body.home-mobile-single-article .proto-os-doc-item::after,
    body.home-mobile-single-article .proto-os-community-item::after,
    body.home-mobile-single-article .proto-conference-card-new::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
    }

    body.home-mobile-single-article .proto-user-type-card::before,
    body.home-mobile-single-article .resource-card::before,
    body.home-mobile-single-article .proto-demand-card::before,
    body.home-mobile-single-article .proto-solution-card::before,
    body.home-mobile-single-article .proto-promotion-card::before,
    body.home-mobile-single-article .proto-os-card::before,
    body.home-mobile-single-article .proto-os-model-item::before,
    body.home-mobile-single-article .proto-os-component-item::before,
    body.home-mobile-single-article .proto-os-body-item::before,
    body.home-mobile-single-article .proto-os-doc-item::before,
    body.home-mobile-single-article .proto-os-community-item::before,
    body.home-mobile-single-article .proto-conference-card-new::before {
        background:
            radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255, 255, 255, 0.42) 0, rgba(151, 211, 255, 0.10) 22%, rgba(151, 211, 255, 0.02) 44%, rgba(151, 211, 255, 0) 66%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    body.home-mobile-single-article .proto-user-type-card::after,
    body.home-mobile-single-article .resource-card::after,
    body.home-mobile-single-article .proto-demand-card::after,
    body.home-mobile-single-article .proto-solution-card::after,
    body.home-mobile-single-article .proto-promotion-card::after,
    body.home-mobile-single-article .proto-os-card::after,
    body.home-mobile-single-article .proto-os-model-item::after,
    body.home-mobile-single-article .proto-os-component-item::after,
    body.home-mobile-single-article .proto-os-body-item::after,
    body.home-mobile-single-article .proto-os-doc-item::after,
    body.home-mobile-single-article .proto-os-community-item::after,
    body.home-mobile-single-article .proto-conference-card-new::after {
        inset: 1px;
        border: 1px solid rgba(114, 172, 255, 0);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20);
        transition: border-color 0.28s ease, box-shadow 0.28s ease;
    }

    body.home-mobile-single-article .proto-user-type-card:hover,
    body.home-mobile-single-article .resource-card:hover,
    body.home-mobile-single-article .proto-demand-card:hover,
    body.home-mobile-single-article .proto-solution-card:hover,
    body.home-mobile-single-article .proto-promotion-card:hover,
    body.home-mobile-single-article .proto-os-card:hover,
    body.home-mobile-single-article .proto-os-model-item:hover,
    body.home-mobile-single-article .proto-os-component-item:hover,
    body.home-mobile-single-article .proto-os-body-item:hover,
    body.home-mobile-single-article .proto-os-doc-item:hover,
    body.home-mobile-single-article .proto-os-community-item:hover,
    body.home-mobile-single-article .proto-conference-card-new:hover {
        box-shadow:
            0 24px 54px rgba(16, 60, 132, 0.12),
            0 12px 24px rgba(39, 110, 200, 0.05);
    }

    body.home-mobile-single-article .proto-user-type-card:hover::before,
    body.home-mobile-single-article .resource-card:hover::before,
    body.home-mobile-single-article .proto-demand-card:hover::before,
    body.home-mobile-single-article .proto-solution-card:hover::before,
    body.home-mobile-single-article .proto-promotion-card:hover::before,
    body.home-mobile-single-article .proto-os-card:hover::before,
    body.home-mobile-single-article .proto-os-model-item:hover::before,
    body.home-mobile-single-article .proto-os-component-item:hover::before,
    body.home-mobile-single-article .proto-os-body-item:hover::before,
    body.home-mobile-single-article .proto-os-doc-item:hover::before,
    body.home-mobile-single-article .proto-os-community-item:hover::before,
    body.home-mobile-single-article .proto-conference-card-new:hover::before {
        opacity: 1;
    }

    body.home-mobile-single-article .proto-user-type-card:hover::after,
    body.home-mobile-single-article .resource-card:hover::after,
    body.home-mobile-single-article .proto-demand-card:hover::after,
    body.home-mobile-single-article .proto-solution-card:hover::after,
    body.home-mobile-single-article .proto-promotion-card:hover::after,
    body.home-mobile-single-article .proto-os-card:hover::after,
    body.home-mobile-single-article .proto-os-model-item:hover::after,
    body.home-mobile-single-article .proto-os-component-item:hover::after,
    body.home-mobile-single-article .proto-os-body-item:hover::after,
    body.home-mobile-single-article .proto-os-doc-item:hover::after,
    body.home-mobile-single-article .proto-os-community-item:hover::after,
    body.home-mobile-single-article .proto-conference-card-new:hover::after {
        border-color: rgba(135, 190, 255, 0.28);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.28),
            0 0 0 1px rgba(140, 201, 255, 0.08);
    }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    body.home-mobile-single-article .proto-hero::after,
    body.home-mobile-single-article .banner::after {
        animation: none;
    }

    body.home-mobile-single-article .proto-user-type-card,
    body.home-mobile-single-article .resource-card,
    body.home-mobile-single-article .proto-demand-card,
    body.home-mobile-single-article .proto-solution-card,
    body.home-mobile-single-article .proto-promotion-card,
    body.home-mobile-single-article .proto-os-card,
    body.home-mobile-single-article .proto-os-model-item,
    body.home-mobile-single-article .proto-os-component-item,
    body.home-mobile-single-article .proto-os-body-item,
    body.home-mobile-single-article .proto-os-doc-item,
    body.home-mobile-single-article .proto-os-community-item,
    body.home-mobile-single-article .proto-conference-card-new {
        transform: none !important;
    }
}

@keyframes tech-grid-drift {
    0% {
        transform: perspective(1200px) translateY(-6%) scale(1.08);
    }
    100% {
        transform: perspective(1200px) translateY(2%) scale(1.12);
    }
}

@keyframes tech-scan {
    0%,
    100% {
        transform: translateX(-130%);
        opacity: 0;
    }
    18% {
        opacity: 0;
    }
    48% {
        transform: translateX(22%);
        opacity: 1;
    }
    82% {
        opacity: 0;
    }
}