:root {
    --page: #eef6ff;
    --surface: #ffffff;
    --surface-soft: #f7fbff;
    --text: #182235;
    --muted: #8794a8;
    --line: #e7edf7;
    --line-strong: #d8e1f0;
    --brand: #3f7cff;
    --brand-dark: #2c5fe8;
    --accent: #7c5cff;
    --accent-pink: #f08bb5;
    --danger: #ef5b72;
    --shadow: 0 18px 46px rgba(56, 83, 125, 0.12);
}

@font-face {
    font-family: "NeonSans";
    src: url("/assets/fonts/NeonSans.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    background: var(--page);
}

body {
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 84% 68%, rgba(226, 209, 255, 0.62), transparent 23%),
        radial-gradient(circle at 12% 4%, rgba(194, 222, 255, 0.82), transparent 28%),
        linear-gradient(180deg, #edf6ff 0%, #f8fbff 48%, #f2ecff 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 42%),
        linear-gradient(180deg, rgba(63, 124, 255, 0.05), transparent 50%);
}

a {
    color: inherit;
}

.app-wrapper {
    width: min(100%, 430px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 20px 20px 28px;
    display: flex;
    flex-direction: column;
}

.brand-hero {
    padding: 26px 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 52px rgba(56, 83, 125, 0.13);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.brand-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.54)),
        linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.72) 46%, transparent 58%),
        radial-gradient(circle at 24% 0%, rgba(105, 146, 255, 0.14), transparent 32%);
    background-size: auto, 220% 100%, auto;
    animation: heroSheen 7s ease-in-out infinite;
}

.brand-copy {
    min-width: 0;
    position: relative;
    z-index: 1;
    text-align: center;
}

.brand-title {
    position: relative;
    display: inline-block;
    color: transparent;
    background:
        linear-gradient(90deg, #2f6bff 0%, #7a5cff 28%, #2f6bff 54%, #ff5fb2 78%, #2f6bff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(1.65rem, 7vw, 2.35rem);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
    text-shadow: 0 0 20px rgba(71, 110, 255, 0.16);
    animation:
        titleRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both,
        titleGradientFlow 5.4s ease-in-out infinite,
        titleGlowPulse 2.8s ease-in-out infinite;
}

.brand-title::after {
    content: "";
    position: absolute;
    inset: -6px -10px;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.82) 48%, transparent 60%);
    mix-blend-mode: screen;
    transform: translateX(-140%) skewX(-12deg);
    animation: titleSpark 3.8s ease-in-out infinite;
}

.brand-slogan {
    margin-top: 10px;
    color: #5f6f88;
    font-size: 0.81rem;
    font-weight: 650;
    letter-spacing: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: titleRise 0.72s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.notice-bar {
    margin-top: 18px;
    min-height: 45px;
    padding: 8px 13px 8px 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(233, 239, 249, 0.76);
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.notice-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #f06a9f;
    background: #fff3f8;
    font-size: 0.82rem;
    z-index: 2;
    animation: noticePulse 2.8s ease-in-out infinite;
}

.marquee-wrap {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 40px;
}

.marquee-text {
    display: inline-block;
    color: #e0243f;
    font-size: 0.82rem;
    font-weight: 650;
    padding-left: 100%;
    animation: scrollLeft 9s linear infinite;
    will-change: transform;
}

.content-flow {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 38px;
}

.content-section {
    position: relative;
}

.section-title {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    color: var(--text);
    font-size: 1rem;
    font-weight: 900;
}

.section-title::before {
    content: "";
    width: 4px;
    height: 16px;
    margin-right: 9px;
    border-radius: 999px;
    background: var(--brand);
}

.section-title::after {
    content: none;
}

.grid-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.single-grid {
    grid-template-columns: 1fr;
}

.nav-card,
.list-item,
.site-row,
.scan-card,
.browser-mockup {
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 38px rgba(62, 82, 126, 0.1);
    overflow: hidden;
    position: relative;
}

.nav-card {
    min-height: 168px;
    padding: 26px 12px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    animation: cardIn 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.nav-card:nth-child(2) { animation-delay: 0.06s; }
.nav-card:nth-child(3) { animation-delay: 0.12s; }
.nav-card:nth-child(4) { animation-delay: 0.18s; }

.nav-card::before,
.list-item::before,
.site-row::before {
    content: "";
    position: absolute;
    inset: -40%;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--press-x, 50%) var(--press-y, 40%), rgba(126, 151, 255, 0.2), transparent 34%);
    transition: opacity 0.24s ease;
}

.nav-card::after,
.list-item::after,
.site-row::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.7) 46%, transparent 58%);
    transform: translateX(-48%);
    transition: opacity 0.22s ease, transform 0.42s ease;
}

.nav-card:hover,
.list-item:hover,
.site-row:hover {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 22px 44px rgba(62, 82, 126, 0.15);
}

.nav-card:hover::before,
.list-item:hover::before,
.site-row:hover::before,
.nav-card:active::before,
.list-item:active::before {
    opacity: 1;
}

.nav-card:hover::after,
.list-item:hover::after,
.site-row:hover::after {
    opacity: 1;
    transform: translateX(48%);
}

.nav-card:active,
.list-item:active,
.big-btn:active {
    transform: translateY(0) scale(0.99);
}

.feature-card {
    min-height: 116px;
    padding: 24px 26px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    text-align: left;
}

.card-icon-box,
.list-icon {
    display: grid;
    place-items: center;
    color: #ffffff;
    background: var(--icon-bg, linear-gradient(135deg, var(--brand), var(--accent)));
}

.card-icon-box {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 14px;
    font-size: 1.35rem;
    box-shadow: 0 12px 28px rgba(63, 124, 255, 0.24);
    animation: iconFloat 4.2s ease-in-out infinite;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.sant-icon-box {
    overflow: hidden;
    padding: 0;
    background: #ffffff;
}

.sant-card-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.nav-card:hover .card-icon-box {
    transform: translateY(-2px) scale(1.07) rotate(-2deg);
    filter: saturate(1.14);
}

.feature-card .card-icon-box {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    margin-bottom: 0;
}

.feature-card .card-copy {
    width: auto;
    text-align: left;
}

.feature-card .card-title {
    font-size: 1.04rem;
}

.card-copy {
    min-width: 0;
    width: 100%;
}

.card-title {
    color: var(--text);
    font-size: 1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.card-desc {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 560;
    overflow-wrap: anywhere;
}

.list-nav,
.site-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.list-item,
.site-row {
    min-height: 62px;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    animation: cardIn 0.56s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.list-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.list-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    font-size: 1rem;
    background: linear-gradient(135deg, #67a0ff, #8367ff);
}

.list-text {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.list-arrow {
    color: #b7c1d0;
    font-size: 0.85rem;
}

.site-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.site-index {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: var(--brand);
    background: #edf4ff;
    font-size: 0.8rem;
    font-weight: 900;
}

.site-info {
    min-width: 0;
}

.site-info h3 {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.site-url {
    color: var(--text);
    font-size: 0.98rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.site-speed {
    min-width: 52px;
    padding: 3px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
}

.speed-fast { color: #188b62; background: rgba(26, 179, 122, 0.12); }
.speed-medium { color: #916313; background: rgba(245, 180, 65, 0.16); }
.speed-slow { color: #c73955; background: rgba(239, 91, 114, 0.12); }
.speed-checking { color: var(--muted); background: var(--surface-soft); animation: pulse 1.5s infinite; }

.scan-card,
.header-card,
.guide-header {
    padding: 26px 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.platform-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    font-size: 1.9rem;
    box-shadow: 0 14px 28px rgba(63, 124, 255, 0.24);
}

.page-title {
    color: var(--text);
    font-size: 1.55rem;
    font-weight: 900;
}

.page-desc {
    margin: 4px 0 22px;
    color: var(--muted);
    font-size: 0.9rem;
}

.page-desc-certified {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
}

.page-desc-certified i {
    color: var(--brand);
}

.desc-divider {
    width: 1px;
    height: 12px;
    background: var(--line);
}

.page-hero-card {
    margin-bottom: 20px;
}

.qr-box {
    width: 220px;
    height: 220px;
    margin: 0 auto 20px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    position: relative;
}

.qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
    position: relative;
    z-index: 1;
}

.scan-line {
    position: absolute;
    width: 88%;
    left: 6%;
    height: 3px;
    top: 10%;
    background: linear-gradient(90deg, transparent, var(--brand), transparent);
    box-shadow: 0 0 16px rgba(63, 124, 255, 0.58);
    border-radius: 999px;
    pointer-events: none;
    z-index: 2;
    animation: scanAnim 2.5s ease-in-out infinite;
}

.step-tips {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.tip-item {
    width: 33%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.tip-num {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--brand);
    background: rgba(63, 124, 255, 0.1);
    font-weight: 900;
}

.tip-text {
    color: var(--muted);
    font-size: 0.73rem;
    line-height: 1.4;
}

.big-btn {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    box-shadow: 0 14px 28px rgba(63, 124, 255, 0.24);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 850;
    transition: transform 0.18s ease, filter 0.18s ease;
    gap: 8px;
}

.big-btn:hover {
    filter: saturate(1.08);
}

.guide-flow {
    margin-top: 18px;
}

.guide-step {
    display: flex;
    margin-bottom: 28px;
}

.g-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin-right: 14px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
    font-size: 1rem;
    position: relative;
}

.guide-step:not(:last-child) .g-icon::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 34px;
    background: var(--line);
    transform: translateY(38px);
}

.g-title {
    font-weight: 850;
}

.g-desc {
    margin: 4px 0 12px;
    color: var(--muted);
    font-size: 0.84rem;
}

.browser-mockup {
    max-width: 270px;
    padding: 10px;
}

.mockup-btn {
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--surface-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.mockup-icon-center {
    display: flex;
    justify-content: center;
    padding: 10px;
    color: var(--brand);
    font-size: 1.45rem;
}

.mockup-menu {
    text-align: right;
    padding: 7px 15px;
    color: var(--muted);
    font-size: 1.35rem;
}

.back-home-link {
    justify-content: center;
    color: var(--muted);
}

.footer {
    margin-top: auto;
    padding: 28px 0 4px;
    color: #9aa8ba;
    text-align: center;
    font-size: 0.75rem;
}

.preview-badge {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1000;
    padding: 8px 14px;
    border-radius: 999px;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 10px 24px rgba(63, 124, 255, 0.2);
    font-size: 0.82rem;
    font-weight: 850;
}

.cursor-dot {
    pointer-events: none;
    z-index: 9999;
    position: fixed;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--brand);
    box-shadow:
        0 0 0 5px rgba(63, 124, 255, 0.1),
        0 0 18px rgba(63, 124, 255, 0.32);
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
}

.cursor-outline {
    pointer-events: none;
    z-index: 9998;
    position: fixed;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(63, 124, 255, 0.36);
    background:
        radial-gradient(circle, rgba(63, 124, 255, 0.08) 0 26%, transparent 28%),
        radial-gradient(circle, rgba(124, 92, 255, 0.12), transparent 68%);
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
    animation: cursorBreath 1.8s ease-in-out infinite;
}

.cursor-outline.hovered {
    width: 56px;
    height: 56px;
}

.yc-logo-svg {
    width: 54px;
    height: 54px;
    display: block;
}

.yc-logo-stroke {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    font-family: "NeonSans", "Arial Narrow", Arial, sans-serif;
    font-size: 118px;
    font-weight: 800;
    letter-spacing: 0;
    paint-order: stroke fill;
}

.yc-logo-svg.is-complete .yc-logo-stroke {
    animation: logoInkFill 0.55s ease forwards;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes heroSheen {
    0%, 62%, 100% { background-position: 0 0, -140% 0, 0 0; }
    82% { background-position: 0 0, 140% 0, 0 0; }
}

@keyframes titleRise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes titleGradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes titleGlowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(79, 109, 255, 0));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(79, 109, 255, 0.32));
    }
}

@keyframes titleSpark {
    0%, 58%, 100% {
        opacity: 0;
        transform: translateX(-140%) skewX(-12deg);
    }
    72% {
        opacity: 0.9;
    }
    88% {
        opacity: 0;
        transform: translateX(140%) skewX(-12deg);
    }
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes noticePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(240, 106, 159, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(240, 106, 159, 0);
    }
}

@keyframes logoInkFill {
    from {
        fill: transparent;
        opacity: 0.9;
    }
    to {
        fill: currentColor;
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes cursorBreath {
    0%, 100% {
        opacity: 0.82;
        filter: saturate(1);
    }
    50% {
        opacity: 1;
        filter: saturate(1.2);
    }
}

@keyframes scanAnim {
    0% { top: 10%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { top: 88%; opacity: 0; }
}

@media (max-width: 420px) {
    .app-wrapper {
        padding: 20px 20px 24px;
    }

    .brand-hero {
        padding: 26px 20px 20px;
    }

    .content-flow {
        gap: 20px;
        margin-top: 38px;
    }

    .grid-nav {
        gap: 16px;
    }

    .nav-card {
        min-height: 168px;
        padding: 26px 10px 24px;
    }

    .brand-title {
        font-size: 1.72rem;
    }

    .brand-slogan {
        font-size: 0.8rem;
        letter-spacing: 1.7px;
    }
}

@media (max-width: 360px) {
    .app-wrapper {
        padding-left: 14px;
        padding-right: 14px;
    }

    .grid-nav {
        gap: 12px;
    }

    .nav-card {
        min-height: 152px;
    }

    .card-icon-box {
        width: 48px;
        height: 48px;
    }

    .brand-title {
        font-size: 1.5rem;
    }

    .brand-slogan {
        font-size: 0.72rem;
        letter-spacing: 1px;
    }
}

@media (max-width: 768px) {
    .cursor-dot,
    .cursor-outline {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .marquee-text {
        animation-duration: 9s !important;
        animation-iteration-count: infinite !important;
    }

    .scan-line {
        animation-duration: 2.5s !important;
        animation-iteration-count: infinite !important;
    }
}

/* 喜得来·HG 首页新版风格 */
.app-wrapper.hg-redesign {
    width: min(100%, 430px);
    padding: 18px 18px 26px;
    position: relative;
}

.app-wrapper.hg-redesign::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% -10%, rgba(97, 223, 110, 0.38), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(180deg, #07110d 0%, #0c1712 52%, #f6fbf7 52%, #eef7f1 100%);
}

.hg-redesign .brand-hero {
    padding: 22px 18px 20px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.hg-redesign .brand-hero::before {
    inset: auto -48px auto auto;
    top: -42px;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 226, 96, 0.68), rgba(92, 226, 96, 0) 70%);
}

.hg-redesign .brand-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
}

.hg-redesign .brand-logo {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(73, 225, 80, 0.24);
}

.hg-redesign .brand-copy {
    text-align: left;
}

.hg-redesign .brand-kicker {
    color: #93f2a2;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.hg-redesign .brand-title {
    display: block;
    margin: 2px 0 0;
    color: #edfdf4;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    font-size: 32px;
    line-height: 1.05;
    font-weight: 1000;
    letter-spacing: -0.04em;
    animation: none;
    text-shadow: none;
}

.hg-redesign .brand-title::after {
    content: none;
}

.hg-redesign .brand-slogan {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    color: rgba(237, 253, 244, 0.78);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: normal;
}

.hg-redesign .notice-bar {
    position: relative;
    z-index: 1;
    min-height: 0;
    margin-top: 16px;
    padding: 11px 13px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.12);
    color: #eaffef;
    box-shadow: none;
}

.hg-redesign .notice-icon {
    color: #93f2a2;
}

.hg-redesign .marquee-text {
    color: #eaffef;
    font-size: 13px;
    font-weight: 800;
}

.hg-redesign .content-flow {
    gap: 22px;
    margin-top: 22px;
}

.hg-redesign .section-title {
    margin: 0 2px 12px;
    color: #0b1811;
    font-size: 18px;
    font-weight: 1000;
}

.hg-redesign .section-title::before {
    content: none;
}

.hg-redesign .section-title::after {
    content: "新版";
    display: inline-flex;
    width: auto;
    height: auto;
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #dcfbe1;
    color: #15803d;
    font-size: 12px;
    font-weight: 900;
}

.hg-redesign .grid-nav {
    gap: 12px;
}

.hg-redesign .nav-card,
.hg-redesign .list-item {
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 42px rgba(15, 43, 24, 0.1);
    color: #102018;
}

.hg-redesign .nav-card {
    min-height: 136px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    text-align: left;
}

.hg-redesign .nav-card::before,
.hg-redesign .list-item::before {
    inset: auto -30px -38px auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    opacity: 1;
    background: rgba(95, 222, 94, 0.14);
}

.hg-redesign .nav-card::after,
.hg-redesign .list-item::after {
    content: none;
}

.hg-redesign .card-icon-box,
.hg-redesign .list-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    color: #ffffff;
    background: #0d1912;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    animation: none;
}

.hg-redesign .sant-icon-box {
    background: #ffffff;
}

.hg-redesign .card-title {
    margin-top: 16px;
    color: #102018;
    font-size: 17px;
    font-weight: 1000;
    letter-spacing: -0.02em;
}

.hg-redesign .card-desc {
    margin-top: 4px;
    color: #66756b;
    font-size: 13px;
    font-weight: 800;
}

.hg-redesign .feature-card {
    grid-column: 1 / -1;
    min-height: 94px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.hg-redesign .feature-card .card-title {
    margin-top: 0;
}

.hg-redesign .list-nav {
    gap: 12px;
}

.hg-redesign .list-item {
    min-height: 74px;
    padding: 16px;
}

.hg-redesign .list-arrow {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #dcfbe1;
    color: #15803d;
}

.hg-redesign .footer {
    margin-top: auto;
    color: #7f8f85;
    font-size: 12px;
    font-weight: 800;
}

/* 调整：标题区去图标、去新版标记、提升文字与背景协调性 */
.hg-redesign .brand-hero {
    padding: 30px 22px 24px;
    border-radius: 28px;
    border: 1px solid rgba(219, 255, 226, 0.28);
    background:
        radial-gradient(circle at 18% 12%, rgba(122, 255, 146, 0.2), transparent 34%),
        linear-gradient(145deg, rgba(15, 42, 27, 0.96), rgba(6, 22, 14, 0.94));
    box-shadow: 0 24px 60px rgba(2, 14, 8, 0.34);
}

.hg-redesign .brand-hero::before {
    top: -70px;
    right: -64px;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(89, 230, 104, 0.36), rgba(89, 230, 104, 0) 68%);
}

.hg-redesign .brand-top {
    display: block;
}

.hg-redesign .brand-logo {
    display: none;
}

.hg-redesign .brand-copy {
    text-align: left;
}

.hg-redesign .brand-kicker {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(145, 242, 162, 0.13);
    color: #9df2ad;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.hg-redesign .brand-title {
    margin-top: 12px;
    color: #f3fff6;
    font-size: 36px;
    line-height: 1.08;
    font-weight: 1000;
    letter-spacing: -0.035em;
    text-shadow: 0 2px 18px rgba(115, 255, 137, 0.14);
}

.hg-redesign .brand-slogan {
    max-width: 330px;
    margin-top: 12px;
    color: rgba(227, 255, 234, 0.76);
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
}

.hg-redesign .notice-bar {
    margin-top: 18px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(221, 255, 226, 0.14);
}

.hg-redesign .section-title::after {
    content: none;
}

/* 调整：恢复原版副标题、重配标题卡片颜色、移除入口卡片圆形装饰、统一图标框 */
.hg-redesign .brand-hero {
    background:
        linear-gradient(145deg, rgba(244, 255, 246, 0.96), rgba(222, 248, 230, 0.94));
    border-color: rgba(166, 231, 181, 0.64);
    box-shadow: 0 22px 54px rgba(19, 77, 37, 0.16);
}

.hg-redesign .brand-hero::before {
    top: -86px;
    right: -70px;
    width: 210px;
    height: 210px;
    background: radial-gradient(circle, rgba(73, 202, 91, 0.2), rgba(73, 202, 91, 0) 70%);
}

.hg-redesign .brand-kicker {
    background: rgba(21, 128, 61, 0.1);
    color: #15803d;
}

.hg-redesign .brand-title {
    color: #0d2b18;
    text-shadow: none;
}

.hg-redesign .brand-slogan {
    color: #496553;
    font-size: 13px;
    letter-spacing: 1px;
}

.hg-redesign .notice-bar {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(149, 220, 166, 0.5);
}

.hg-redesign .notice-icon,
.hg-redesign .marquee-text {
    color: #176b35;
}

.hg-redesign .nav-card::before,
.hg-redesign .list-item::before {
    content: none;
}

.hg-redesign .card-icon-box,
.hg-redesign .list-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    min-width: 52px;
    max-width: 52px;
    min-height: 52px;
    max-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 14px;
    border-radius: 16px;
    border: 1px solid rgba(159, 230, 175, 0.72);
    background: linear-gradient(145deg, #ecfff0, #d9f7e0);
    color: #15803d;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(21, 128, 61, 0.13);
}

.hg-redesign .card-icon-box i,
.hg-redesign .list-icon i {
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
}

.hg-redesign .sant-icon-box {
    padding: 4px;
    background: linear-gradient(145deg, #ffffff, #effcf2);
}

.hg-redesign .sant-card-icon {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.hg-redesign .feature-card .card-icon-box {
    margin-bottom: 0;
}

.hg-redesign .list-icon {
    margin-bottom: 0;
}

/* 调整：隐藏 SANT ACCESS，标题/副标题居中，并恢复原版流光动画感 */
.hg-redesign .brand-kicker { display: none; }
.hg-redesign .brand-copy { text-align: center; }
.hg-redesign .brand-title {
    display: inline-block;
    margin: 0 auto;
    color: transparent;
    background: linear-gradient(90deg, #0f7a36 0%, #24b84f 28%, #0f7a36 54%, #7de38c 78%, #0f7a36 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: titleGradient 5.4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.hg-redesign .brand-title::after {
    content: "";
    position: absolute;
    inset: -6px -12px;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.95) 48%, transparent 60%);
    mix-blend-mode: screen;
    transform: translateX(-140%) skewX(-12deg);
    animation: titleSpark 4.2s ease-in-out infinite;
}
.hg-redesign .brand-slogan {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* 喜得来·HG：二级页面统一绿色主题 */
:root {
    --page: #eef7f1;
    --surface: #ffffff;
    --surface-soft: #f2fbf4;
    --text: #0d2b18;
    --muted: #607367;
    --line: #d6eadb;
    --line-strong: #b9ddc3;
    --brand: #15803d;
    --brand-dark: #0f6b32;
    --accent: #36c263;
    --accent-pink: #7de38c;
    --danger: #ef5b72;
    --shadow: 0 20px 46px rgba(19, 77, 37, 0.12);
}

html {
    background: #eef7f1;
}

body {
    background:
        radial-gradient(circle at 18% -8%, rgba(87, 221, 110, 0.22), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.85), transparent 24%),
        linear-gradient(180deg, #f7fff8 0%, #eef8f1 48%, #e6f3eb 100%);
}

.scan-card,
.header-card,
.guide-header,
.page-hero-card {
    padding: 28px 22px;
    border-radius: 28px;
    border: 1px solid rgba(166, 231, 181, 0.64);
    background:
        radial-gradient(circle at 84% 0%, rgba(73, 202, 91, 0.16), transparent 38%),
        linear-gradient(145deg, rgba(244, 255, 246, 0.96), rgba(222, 248, 230, 0.94));
    box-shadow: 0 22px 54px rgba(19, 77, 37, 0.16);
    color: #0d2b18;
}

.platform-icon,
.g-icon,
.site-index,
.tip-num,
.mockup-icon-center {
    color: #15803d;
}

.platform-icon,
.g-icon,
.site-index,
.tip-num {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(159, 230, 175, 0.72);
    background: linear-gradient(145deg, #ecfff0, #d9f7e0);
    box-shadow: 0 12px 24px rgba(21, 128, 61, 0.13);
}

.platform-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    border-radius: 18px;
    font-size: 1.82rem;
}

.page-title {
    color: transparent;
    background: linear-gradient(90deg, #0f7a36 0%, #24b84f 28%, #0f7a36 54%, #7de38c 78%, #0f7a36 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: titleGradient 5.4s ease-in-out infinite;
    font-weight: 1000;
    letter-spacing: -0.02em;
}

.page-desc,
.g-desc,
.tip-text,
.site-info h3,
.footer,
.back-home-link {
    color: #607367;
}

.qr-box,
.browser-mockup,
.mockup-btn {
    border-color: rgba(166, 231, 181, 0.58);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.scan-line {
    background: linear-gradient(90deg, transparent, #28b954, transparent);
    box-shadow: 0 0 16px rgba(40, 185, 84, 0.48);
}

.step-tips {
    border-top-color: rgba(166, 231, 181, 0.52);
}

.big-btn,
.primary-action {
    color: #ffffff;
    background: linear-gradient(135deg, #15803d, #2ebf5c);
    box-shadow: 0 16px 32px rgba(21, 128, 61, 0.22);
}

.big-btn:hover,
.primary-action:hover {
    filter: saturate(1.08) brightness(1.02);
}

.guide-flow {
    padding: 2px 2px 0;
}

.guide-step:not(:last-child) .g-icon::after {
    background: rgba(166, 231, 181, 0.66);
}

.g-title,
.site-url,
.list-text,
.section-title {
    color: #0d2b18;
}

.site-row {
    border-radius: 22px;
    border-color: rgba(166, 231, 181, 0.56);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 34px rgba(19, 77, 37, 0.09);
}

.site-row::before,
.site-row::after {
    content: none;
}

.site-speed.speed-fast,
.speed-fast {
    color: #0f7a36;
    background: rgba(36, 184, 79, 0.13);
}

.site-speed.speed-medium,
.speed-medium {
    color: #8a640c;
    background: rgba(245, 180, 65, 0.15);
}

.site-speed.speed-slow,
.speed-slow {
    color: #bd3350;
    background: rgba(239, 91, 114, 0.12);
}

.speed-checking {
    color: #607367;
    background: rgba(21, 128, 61, 0.08);
}

.theme-toggle {
    border-color: rgba(21, 128, 61, 0.18);
    color: #15803d;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 24px rgba(19, 77, 37, 0.12);
}
/* 调整：扫码页 SANT 标题图标、启动按钮去图标、返回首页浅色主题 */
.platform-sant-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

.scan-card .platform-icon {
    padding: 5px;
    background: linear-gradient(145deg, #ffffff, #effcf2);
    overflow: hidden;
}

.scan-card .big-btn i {
    display: none;
}

.back-home-link,
.hg-redesign .back-home-link {
    min-height: 68px;
    border-radius: 22px;
    border: 1px solid rgba(166, 231, 181, 0.64);
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(236,255,240,0.92));
    box-shadow: 0 14px 30px rgba(19, 77, 37, 0.09);
    color: #0d2b18;
}

.back-home-link .list-content {
    justify-content: center;
}

.back-home-link .list-icon,
.hg-redesign .back-home-link .list-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    max-width: 42px;
    min-height: 42px;
    max-height: 42px;
    margin-bottom: 0;
    border-radius: 14px;
    border: 1px solid rgba(159, 230, 175, 0.72);
    background: linear-gradient(145deg, #ecfff0, #d9f7e0);
    color: #15803d;
    box-shadow: 0 10px 20px rgba(21, 128, 61, 0.12);
}

.back-home-link .list-text,
.hg-redesign .back-home-link .list-text {
    color: #0d2b18;
    font-weight: 900;
}

html[data-yc-theme="fallback"] .scan-card .platform-icon {
    background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(226,255,233,0.92));
}

html[data-yc-theme="fallback"] .back-home-link,
html[data-yc-theme="fallback"] .hg-redesign .back-home-link {
    background: rgba(8, 31, 18, 0.78);
    border-color: rgba(140, 231, 159, 0.18);
    color: #eefbf1;
}

html[data-yc-theme="fallback"] .back-home-link .list-icon {
    color: #dfffe7;
    border-color: rgba(140, 231, 159, 0.24);
    background: linear-gradient(145deg, rgba(28, 94, 48, 0.82), rgba(15, 64, 32, 0.74));
}

html[data-yc-theme="fallback"] .back-home-link .list-text {
    color: #eefbf1;
}
/* 喜得来·HG：风格切换按钮主题适配 */
.theme-toggle {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(166, 231, 181, 0.72);
    color: #0f6b32;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.9), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(230, 250, 235, 0.9));
    box-shadow: 0 12px 28px rgba(19, 77, 37, 0.14);
    backdrop-filter: blur(16px);
    font-weight: 900;
}

.theme-toggle i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #15803d, #24b84f);
    box-shadow: 0 8px 16px rgba(21, 128, 61, 0.2);
    font-size: 12px;
}

.theme-toggle span {
    color: #0d2b18;
    letter-spacing: 0.02em;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(36, 184, 79, 0.72);
    box-shadow: 0 16px 34px rgba(19, 77, 37, 0.18);
}

html[data-yc-theme="fallback"] .theme-toggle {
    color: #dfffe7;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(18, 58, 32, 0.88), rgba(8, 31, 18, 0.86));
    border-color: rgba(140, 231, 159, 0.28);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34), 0 0 22px rgba(73, 202, 91, 0.12);
}

html[data-yc-theme="fallback"] .theme-toggle i {
    color: #06100b;
    background: linear-gradient(135deg, #a7f3b6, #53df78);
    box-shadow: 0 0 18px rgba(83, 223, 120, 0.22);
}

html[data-yc-theme="fallback"] .theme-toggle span {
    color: #dfffe7;
}