/* 云虎社交系统 — 商用首页 */
:root {
    --brand: #ff6b4a;
    --brand-2: #ff8a65;
    --brand-deep: #e85a3a;
    --brand-soft: #fff5f0;
    --brand-ring: rgba(255, 107, 74, 0.28);
    --ink: #0c0f14;
    --ink-2: #3a424e;
    --ink-3: #6b7280;
    --line: rgba(12, 15, 20, 0.08);
    --bg: #f6f7f9;
    --surface: #ffffff;
    --dark: #12151c;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow: 0 8px 32px rgba(12, 15, 20, 0.06);
    --shadow-lg: 0 32px 80px rgba(255, 107, 74, 0.14);
    --font: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-h: 72px;
    --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    color: var(--ink-2);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }

.case_page_content ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
}
.case_page_content ul li.active a{
	color:#FFFFFF!important;
}
.case_page_content ul li {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin: 0 5px;
    font-size: 14px;
    color: #333;
    border: 1px solid #e1e3e6;
    background-color: #fff;
    cursor: pointer;
}

.case_page_content ul li .prev {
    text-align: left;
}

.case_page_content ul li:hover,
.case_page_content ul li.active {
    color: #fff;
    background-color: #ff6b4a;
    border-color: #ff6b4a;
}

.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }

/* Nav */
.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 200;
    height: var(--nav-h);
    transition: background 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
    border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    border-color: var(--line);
    box-shadow: 0 1px 0 var(--line);
}
.nav-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ink);
}
.yunhulogo {
    width: 38px;
    height: 38px;
    border-radius: 11px; 
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 6px 20px var(--brand-ring);
}
.yunhulogo img{
    width: 100%;
    height: 100%;
}
.logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--brand-2), var(--brand));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 6px 20px var(--brand-ring);
}
.nav-links { display: flex; gap: 2px; }
.nav-link {
    padding: 8px 13px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink-3);
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.nav-link:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.nav-link.active { color: var(--brand-deep); background: var(--brand-soft); }
.nav-cta {
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    border-radius: 10px;
    box-shadow: 0 6px 20px var(--brand-ring);
    white-space: nowrap;
    transition: transform 0.2s var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); }
.menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    color: var(--ink);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    font-size: 0.94rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    box-shadow: 0 10px 28px var(--brand-ring);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-secondary {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
}
.btn-secondary:hover { border-color: var(--brand-ring); background: var(--brand-soft); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* Hero */
.hero-pro {
    position: relative;
    padding: calc(var(--nav-h) + 48px) 0 72px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 55% at 85% 0%, rgba(255, 138, 101, 0.22), transparent 60%),
        radial-gradient(ellipse 40% 35% at 5% 90%, rgba(255, 107, 74, 0.08), transparent 55%),
        linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.hero-pro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(12,15,20,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12,15,20,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, #000 30%, transparent 85%);
    pointer-events: none;
}
.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    margin-bottom: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-2);
    box-shadow: var(--shadow);
}
.hero-eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
    font-style: normal;
}
.hero-pro h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin-bottom: 18px;
}
.hero-pro h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--brand), var(--brand-deep));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-lead {
    font-size: 1.08rem;
    color: var(--ink-3);
    max-width: 34em;
    margin-bottom: 28px;
}
.hero-lead strong { color: var(--ink-2); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
}
.hero-points li {
    list-style: none;
    display: flex;
    gap: 10px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink-2);
}
.hero-points li::before {
    content: "✓";
    color: var(--brand);
    font-weight: 800;
}

/* Device */
.hero-device { position: relative; display: flex; justify-content: center; }
.device {
    position: relative;
    width: min(290px, 88vw);
    padding: 11px;
    border-radius: 42px;
    background: linear-gradient(160deg, #3a3a40, #111114);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.device-screen {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    background: #111;
    aspect-ratio: 390/844;
}
/* iPhone 灵动岛（叠在含状态栏的截图顶部中央） */
.device-island {
    position: absolute;
    top: 1.35%;
    left: 50%;
    z-index: 2;
    width: 32.3%;
    height: 4.1%;
    min-height: 17px;
    max-height: 26px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #000;
    pointer-events: none;
}
.device-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.device-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.device-carousel__track {
    position: relative;
    width: 100%;
    height: 100%;
    contain: layout style paint;
}
.device-carousel__track img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transform: scale(1.035);
    filter: brightness(0.94);
    z-index: 0;
    pointer-events: none;
    backface-visibility: hidden;
    will-change: opacity, transform;
    transition:
        opacity 0.5s ease-in,
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.5s ease;
}
.device-carousel__track img.is-leaving {
    opacity: 0;
    transform: scale(1);
    filter: brightness(0.98);
    z-index: 1;
    transition:
        opacity 0.55s cubic-bezier(0.4, 0, 1, 1),
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.55s ease;
}
.device-carousel__track img.is-active {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
    z-index: 2;
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.04s,
        filter 0.75s ease 0.04s;
}
.device-carousel.is-transitioning .device-carousel__track img {
    will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
    .device-carousel__track img,
    .device-carousel__track img.is-active,
    .device-carousel__track img.is-leaving {
        transition: none;
        transform: none;
        filter: none;
        will-change: auto;
    }
}
.device-notch {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 26px;
    background: #111;
    border-radius: 0 0 16px 16px;
    z-index: 2;
    pointer-events: none;
}
.device-float {
    position: absolute;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    animation: bob 5s ease-in-out infinite;
}
.device-float__ico {
    display: inline-block;
    margin-right: 0.35em;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.05em;
    line-height: 1;
    vertical-align: -0.06em;
}
.device-float--a { top: 10%; right: -2%; }
.device-float--b { bottom: 22%; left: -2%; animation-delay: 1.2s; }
.device-float--c { bottom: 16%; right: 0%; animation-delay: 2.4s; }
.device-float--d { top: 12%; left: -1%; animation-delay: 3.6s; }
.device-float--e { top: 42%; left: 2%; animation-delay: 4.8s; }
.device-float--f { top: 32%; right: 2%; animation-delay: 6s; }
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* Metrics */
.metrics {
    padding: 28px 0;
    background: var(--dark);
    color: #fff;
}
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
.metrics-item strong {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 4px;
}
.metrics-item span { font-size: 0.82rem; color: rgba(255,255,255,0.58); }

/* Sections */
.section { padding: 88px 0; }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 52px;
}
.section-label {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 10px;
}
.section-head h2 {
    font-size: clamp(1.65rem, 2.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 10px;
}
.section-head p { color: var(--ink-3); font-size: 1.02rem; }

/* Capabilities */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.cap-card {
    padding: 26px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.cap-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-ring);
    box-shadow: var(--shadow);
}
.cap-card .icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    margin-bottom: 14px;
}
.cap-card h3 { font-size: 0.98rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.cap-card p { font-size: 0.82rem; color: var(--ink-3); line-height: 1.5; }

/* Demo showcase — unified card (Stripe / Linear style) */
.demo-showcase {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.demo-showcase__grid {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    align-items: stretch;
    min-height: 0;
}
.demo-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 18px 18px 20px;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    border-right: 1px solid var(--line);
    min-height: 100%;
}
.demo-nav__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin-bottom: 12px;
}
.demo-nav__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}
.demo-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-height: 56px;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    border: none;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.demo-nav__item:hover {
    background: rgba(255, 255, 255, 0.85);
}
.demo-nav__item.is-active {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}
.demo-nav__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.demo-nav__item.is-active .demo-nav__icon {
    border-color: rgba(255, 107, 74, 0.25);
    background: #fff;
}
.demo-nav__text strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.demo-nav__text small {
    display: block;
    font-size: 0.74rem;
    color: var(--ink-3);
    margin-top: 2px;
}
.demo-nav__aside {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.demo-nav__stats {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}
.demo-nav__stats li {
    font-size: 0.8rem;
    color: var(--ink-3);
    line-height: 1.4;
}
.demo-nav__stats strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
    margin-right: 4px;
}
.demo-nav__cta {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-deep);
    text-decoration: none;
    transition: color 0.2s;
}
.demo-nav__cta:hover { color: var(--brand); }
.demo-viewport {
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 32px 32px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 107, 74, 0.12), transparent 55%),
        radial-gradient(circle at 50% 0%, rgba(255, 107, 74, 0.06), transparent 45%),
        #f8f9fb;
}
.demo-viewport__caption {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-3);
    text-align: center;
    max-width: 28ch;
    line-height: 1.5;
    min-height: 2.8em;
    transition: opacity 0.25s var(--ease);
}
.demo-viewport__caption.is-swapping { opacity: 0; }
.demo-viewport__frame {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.device--showcase {
    width: min(318px, 92%);
    box-shadow:
        0 40px 80px rgba(12, 15, 20, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.device-screen--demo {
    position: relative;
}
/* 动态社区 / 礼物 / VIP 等为独立叠层，需高于默认 z-index:2 的灵动岛 */
.device-screen--demo > .device-island {
    z-index: 14;
}
.device-screen--demo > img {
    object-fit: cover;
    object-position: top center;
}
#demoScreen {
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
#demoScreen.is-swapping {
    opacity: 0;
    transform: scale(0.98) translateY(6px);
}
#demoScreen.is-behind-profile {
    opacity: 0;
    transform: translateX(-12%);
}
.demo-home__tap-overlay {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}
.demo-home__tap-overlay--user-card {
    top: 43.5%;
    left: 5%;
    width: 90%;
    height: 14%;
}
.demo-home__tap-overlay--user-card::after {
    left: 14%;
}
.device-screen--demo:has(.demo-profile.is-open) .demo-home__tap-overlay,
.device-screen--demo.is-chat-demo .demo-home__tap-overlay,
.device-screen--demo.is-feed-demo .demo-home__tap-overlay,
.device-screen--demo.is-gift-demo .demo-home__tap-overlay,
.device-screen--demo.is-vip-demo .demo-home__tap-overlay {
    visibility: hidden;
    pointer-events: none;
}
.device-screen--demo.is-feed-demo > #demoScreen,
.device-screen--demo.is-gift-demo > #demoScreen,
.device-screen--demo.is-vip-demo > #demoScreen {
    display: none !important;
}
.device-screen--demo.is-vip-demo .demo-chat,
.device-screen--demo.is-vip-demo .demo-gift,
.device-screen--demo.is-vip-demo .demo-feed,
.device-screen--demo.is-vip-demo .demo-feed-detail,
.device-screen--demo.is-vip-demo .demo-feed-video {
    display: none !important;
}
.device-screen--demo:not(.is-vip-demo) .demo-vip {
    display: none !important;
}
.device-screen--demo.is-vip-demo .demo-vip {
    display: block;
    pointer-events: auto;
}
.demo-vip {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    background: #111;
}
.demo-vip__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.demo-vip__center {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.demo-vip.is-pay-open .demo-vip__center,
.demo-vip.is-active-open .demo-vip__center {
    pointer-events: none;
}
.demo-vip__scroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.demo-vip__scroll img,
.demo-vip__screen {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    transition: transform 4.2s ease-in-out;
    will-change: transform;
}
.demo-vip.is-scrolled .demo-vip__scroll img {
    transform: translateY(-22%);
}
.demo-vip__tap-overlay--swipe,
.demo-vip__hit--swipe {
    top: 58%;
    left: 5%;
    width: 90%;
    height: 30%;
    z-index: 7;
}
.demo-vip__tap-overlay--swipe::after {
    left: 50%;
    top: 38%;
}
.device-screen--demo.is-vip-demo .demo-vip:not(.is-pay-open):not(.is-active-open):not(.is-scrolled) .demo-vip__tap-overlay--swipe {
    visibility: visible;
}
.device-screen--demo.is-vip-demo .demo-vip:not(.is-pay-open):not(.is-active-open):not(.is-scrolled) .demo-vip__hit--swipe {
    visibility: visible;
    pointer-events: auto;
}
.demo-vip__tap-overlay,
.demo-vip__hit {
    visibility: hidden;
    pointer-events: none;
}
.device-screen--demo.is-vip-demo .demo-vip:not(.is-pay-open) .demo-vip__tap-overlay--open {
    visibility: visible;
}
.device-screen--demo.is-vip-demo .demo-vip:not(.is-pay-open) .demo-vip__hit--open {
    visibility: visible;
    pointer-events: auto;
}
.demo-vip__tap-overlay {
    position: absolute;
    z-index: 8;
    pointer-events: none;
}
.demo-vip__hit {
    position: absolute;
    z-index: 9;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}
.demo-vip__tap-overlay--open,
.demo-vip__hit--open {
    top: 54%;
    left: 6%;
    width: 88%;
    height: 7.5%;
    z-index: 8;
}
.demo-vip__tap-overlay--open::after {
    left: 50%;
    top: 50%;
}
.demo-vip__pay {
    position: absolute;
    inset: 0;
    z-index: 10;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    overflow: hidden;
    background: #fff;
}
.demo-vip__pay.is-open {
    transform: translateX(0);
    pointer-events: auto;
}
.demo-vip__pay img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.demo-vip.is-pay-open .demo-vip__screen {
    filter: brightness(0.88);
}
.demo-vip__tap-overlay--back,
.demo-vip__hit--back {
    top: 7.5%;
    left: 0;
    width: 18%;
    height: 7%;
    z-index: 6;
}
.demo-vip__tap-overlay--back::after {
    left: 40%;
    top: 50%;
}
.device-screen--demo.is-vip-demo .demo-vip.is-pay-open .demo-vip__tap-overlay--back {
    visibility: visible;
}
.device-screen--demo.is-vip-demo .demo-vip.is-pay-open:not(.is-active-open) .demo-vip__tap-overlay--back,
.device-screen--demo.is-vip-demo .demo-vip.is-pay-open:not(.is-active-open) .demo-vip__hit--back {
    visibility: visible;
}
.device-screen--demo.is-vip-demo .demo-vip.is-pay-open:not(.is-active-open) .demo-vip__hit--back {
    pointer-events: auto;
}
.device-screen--demo.is-vip-demo .demo-vip.is-pay-open:not(.is-active-open) .demo-vip__tap-overlay--pay {
    visibility: visible;
}
.device-screen--demo.is-vip-demo .demo-vip.is-pay-open:not(.is-active-open) .demo-vip__hit--pay {
    visibility: visible;
    pointer-events: auto;
}
.demo-vip__tap-overlay--pay,
.demo-vip__hit--pay {
    bottom: 3.5%;
    left: 5%;
    width: 90%;
    height: 7.5%;
    z-index: 12;
}
.demo-vip__tap-overlay--pay::after {
    left: 50%;
    top: 50%;
}
.demo-vip__toast {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 22;
    transform: translate(-50%, -50%) scale(0.92);
    padding: 14px 28px;
    border-radius: 12px;
    background: rgba(18, 20, 24, 0.88);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
    white-space: nowrap;
}
.demo-vip__toast.is-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.demo-vip__active {
    position: absolute;
    inset: 0;
    z-index: 11;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    overflow: hidden;
    background: #fff;
}
.demo-vip__active.is-open {
    transform: translateX(0);
    pointer-events: auto;
}
.demo-vip__active img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.demo-vip.is-active-open .demo-vip__pay {
    pointer-events: none;
}
.device-screen--demo:not(.is-gift-demo) .demo-gift {
    display: none !important;
}
.device-screen--demo.is-gift-demo .demo-gift {
    display: block;
}
.demo-gift {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: #111;
}
.demo-gift__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.demo-gift__screen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.demo-gift__sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    pointer-events: none;
    overflow: hidden;
    background: #fff;
    border-radius: 14px 14px 0 0;
}
.demo-gift__sheet.is-open {
    transform: translateY(0);
    pointer-events: auto;
}
.demo-gift.is-sheet-open .demo-gift__screen {
    filter: brightness(0.72);
}
.demo-gift__sheet img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}
.demo-gift.is-svga-playing {
    z-index: 8;
}
.demo-gift__effect {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.demo-gift__effect.is-playing {
    opacity: 1;
    visibility: visible;
}
.demo-gift__effect[data-svga-hint="file-protocol"]::after {
    content: "动效加载失败，请 Ctrl+F5 强刷；或双击运行 预览首页.bat";
    position: absolute;
    left: 50%;
    bottom: 18%;
    z-index: 6;
    max-width: 88%;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
}
.demo-gift__svga {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}
.demo-gift__effect.is-playing .demo-gift__svga canvas {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform-origin: center center !important;
}
.demo-gift__tap-overlay--send,
.demo-gift__hit--send {
    visibility: hidden;
    pointer-events: none;
}
.demo-gift.is-sheet-open .demo-gift__tap-overlay--send {
    visibility: visible;
    pointer-events: none;
}
.demo-gift.is-sheet-open .demo-gift__hit--send {
    visibility: visible;
    pointer-events: auto;
}
.demo-gift__tap-overlay--send {
    position: absolute;
    z-index: 10;
    bottom: 2.2%;
    right: 3.5%;
    width: 40%;
    height: 8.5%;
}
.demo-gift__tap-overlay--send::after {
    left: 72%;
    top: 50%;
}
.demo-gift__hit--send {
    position: absolute;
    z-index: 11;
    bottom: 2.2%;
    right: 3.5%;
    width: 40%;
    height: 8.5%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}
.demo-gift__tap-overlay,
.demo-gift__hit {
    visibility: hidden;
    pointer-events: none;
}
.device-screen--demo.is-gift-demo .demo-gift:not(.is-sheet-open) .demo-gift__tap-overlay--icon {
    visibility: visible;
    pointer-events: none;
}
.device-screen--demo.is-gift-demo .demo-gift:not(.is-sheet-open) .demo-gift__hit--icon {
    visibility: visible;
    pointer-events: auto;
}
.demo-gift__tap-overlay {
    position: absolute;
    z-index: 8;
}
.demo-gift__hit {
    position: absolute;
    z-index: 9;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}
.demo-gift__tap-overlay--icon,
.demo-gift__hit--icon {
    bottom: 13%;
    left: 5%;
    width: 24%;
    height: 10%;
}
.demo-gift__tap-overlay--icon::after {
    left: 50%;
    top: 50%;
}
.device-screen--demo:not(.is-feed-demo) .demo-feed,
.device-screen--demo:not(.is-feed-demo) .demo-feed-detail,
.device-screen--demo:not(.is-feed-demo) .demo-feed-video {
    display: none !important;
}
.device-screen--demo.is-feed-demo .demo-feed {
    display: block;
}
.demo-feed {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: #f5f5f5;
}
.demo-feed__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.demo-feed__scroll img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    transition: transform 4.5s ease-in-out;
    will-change: transform;
}
.demo-feed.is-scrolled .demo-feed__scroll img {
    transform: translateY(-22%);
}
.demo-feed__tap-overlay,
.demo-feed__hit {
    visibility: hidden;
    pointer-events: none;
}
.device-screen--demo.is-feed-demo .demo-feed:not(.is-detail-open):not(.is-scrolled) .demo-feed__tap-overlay--post-img {
    visibility: visible;
    pointer-events: none;
}
.device-screen--demo.is-feed-demo .demo-feed:not(.is-detail-open):not(.is-scrolled) .demo-feed__hit--post-img {
    visibility: visible;
    pointer-events: auto;
}
.device-screen--demo.is-feed-demo .demo-feed.is-scrolled:not(.is-video-open) .demo-feed__tap-overlay--post-video,
.device-screen--demo.is-feed-demo .demo-feed.is-scrolled:not(.is-video-open) .demo-feed__hit--post-video {
    visibility: visible;
    pointer-events: auto;
}
.device-screen--demo.is-feed-demo .demo-feed.is-scrolled:not(.is-video-open) .demo-feed__tap-overlay--post-video {
    pointer-events: none;
}
.demo-feed__tap-overlay {
    position: absolute;
    z-index: 8;
}
.demo-feed__hit {
    position: absolute;
    z-index: 9;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}
.demo-feed__tap-overlay--post-img,
.demo-feed__hit--post-img {
    top: 58%;
    left: 4%;
    width: 92%;
    height: 18%;
}
.demo-feed__tap-overlay--post-img::after {
    left: 18%;
}
.demo-feed__tap-overlay--post-video,
.demo-feed__hit--post-video {
    top: 30%;
    left: 4%;
    width: 92%;
    height: 17%;
}
.demo-feed__tap-overlay--post-video::after {
    left: 50%;
}
.demo-feed-detail,
.demo-feed-video {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    background: #f5f5f5;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    pointer-events: none;
}
.demo-feed-detail {
    display: flex;
    flex-direction: column;
}
.demo-feed-detail__viewport {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
.demo-feed-detail__scroll img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
}
.demo-feed-detail.is-open .demo-feed-detail__scroll img {
    animation: demo-feed-detail-pan 5.5s ease-in-out forwards;
}
@keyframes demo-feed-detail-pan {
    0% { transform: translateY(0); }
    100% { transform: translateY(-24%); }
}
.demo-feed-detail.is-open,
.demo-feed-video.is-open {
    transform: translateX(0);
    pointer-events: auto;
}
.demo-feed-detail[hidden],
.demo-feed-video[hidden] {
    display: none !important;
}
.demo-feed-video__stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.demo-feed-video__track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 200%;
    transform: translateY(0);
    transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.demo-feed-video.is-next-video .demo-feed-video__track {
    transform: translateY(-50%);
}
.demo-feed-video__slide {
    position: relative;
    width: 100%;
    height: 50%;
    overflow: hidden;
}
.demo-feed-video__poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
}
.demo-feed-video.is-open:not(.is-next-video) .demo-feed-video__slide:first-child .demo-feed-video__poster {
    animation: demo-video-poster-drift 9s ease-in-out infinite alternate;
}
.demo-feed-video.is-open.is-next-video .demo-feed-video__slide:last-child .demo-feed-video__poster {
    animation: demo-video-poster-drift-v2 8s ease-in-out infinite alternate;
}
.demo-feed-video__fx--v2 .demo-feed-video__glow {
    background:
        radial-gradient(ellipse 70% 50% at 50% 35%, transparent 45%, rgba(40, 90, 140, 0.16) 100%),
        radial-gradient(circle at 24% 70%, rgba(120, 220, 255, 0.14) 0%, transparent 32%),
        radial-gradient(circle at 76% 65%, rgba(180, 255, 200, 0.1) 0%, transparent 28%);
}
.demo-feed-video__swipe-hint {
    position: absolute;
    left: 50%;
    bottom: 24%;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    margin-left: -1rem;
    pointer-events: none;
    opacity: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.85);
    border-left: 2px solid rgba(255, 255, 255, 0.85);
    transform: rotate(45deg);
}
.demo-feed-video.is-open:not(.is-next-video) .demo-feed-video__swipe-hint {
    animation: demo-video-swipe-hint 1.6s ease-in-out 0.8s 2;
}
.demo-feed-video__tap-overlay--swipe {
    position: absolute;
    z-index: 8;
    left: 8%;
    right: 8%;
    bottom: 18%;
    top: 35%;
    pointer-events: none;
}
.demo-feed-video.is-open:not(.is-next-video) .demo-feed-video__tap-overlay--swipe.is-tap-hint::after {
    left: 50%;
    top: 70%;
}
.demo-feed-video__hit--video-swipe {
    position: absolute;
    z-index: 9;
    left: 8%;
    right: 8%;
    bottom: 18%;
    top: 35%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.demo-feed-video.is-open:not(.is-next-video) .demo-feed-video__hit--video-swipe {
    visibility: visible;
    pointer-events: auto;
}
.demo-feed-video.is-next-video .demo-feed-video__hit--video-swipe,
.demo-feed-video.is-next-video .demo-feed-video__tap-overlay--swipe,
.demo-feed-video.is-next-video .demo-feed-video__swipe-hint {
    visibility: hidden;
    pointer-events: none;
    animation: none;
}
@keyframes demo-video-poster-drift-v2 {
    0% { transform: scale(1) translateY(0); }
    100% { transform: scale(1.04) translateY(-0.5%); }
}
@keyframes demo-video-swipe-hint {
    0%, 100% { opacity: 0; transform: rotate(45deg) translate(6px, 6px); }
    45%, 55% { opacity: 0.9; transform: rotate(45deg) translate(-2px, -2px); }
}
.demo-feed-video__fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}
.demo-feed-video.is-open:not(.is-next-video) .demo-feed-video__slide:first-child .demo-feed-video__fx,
.demo-feed-video.is-open.is-next-video .demo-feed-video__slide:last-child .demo-feed-video__fx {
    opacity: 1;
}
.demo-feed-video__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 55% at 50% 38%, transparent 50%, rgba(120, 12, 28, 0.14) 100%),
        radial-gradient(circle at 18% 62%, rgba(255, 140, 50, 0.12) 0%, transparent 28%),
        radial-gradient(circle at 82% 58%, rgba(255, 140, 50, 0.1) 0%, transparent 26%);
    animation: demo-video-glow 3.2s ease-in-out infinite alternate;
}
.demo-feed-video__progress {
    position: absolute;
    left: 4.5%;
    right: 16%;
    bottom: 10.8%;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
}
.demo-feed-video__progress i {
    display: block;
    height: 100%;
    width: 18%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.75), #fff);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
    animation: demo-video-progress 5.5s ease-in-out infinite;
}
.demo-feed-video__heart-ring {
    position: absolute;
    right: 6.2%;
    top: 43.5%;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 120, 150, 0.55);
    animation: demo-video-heart-ring 1.35s ease-in-out infinite;
}
.demo-feed-video__like-bump {
    position: absolute;
    right: 7%;
    top: 40%;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ff6b8a;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    opacity: 0;
    animation: demo-video-like-bump 2.4s ease-out infinite;
}
@keyframes demo-video-poster-drift {
    0% { transform: scale(1) translateY(0); }
    100% { transform: scale(1.045) translateY(-0.6%); }
}
@keyframes demo-video-glow {
    0% { opacity: 0.55; }
    100% { opacity: 1; }
}
@keyframes demo-video-progress {
    0%, 100% { width: 14%; transform: translateX(0); }
    45% { width: 68%; transform: translateX(0); }
    70% { width: 72%; transform: translateX(2%); }
}
@keyframes demo-video-heart-ring {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.35;
        box-shadow: 0 0 0 0 rgba(255, 90, 120, 0.4);
    }
    50% {
        transform: scale(1.08);
        opacity: 0.85;
        box-shadow: 0 0 0 0.45rem rgba(255, 90, 120, 0);
    }
}
@keyframes demo-video-like-bump {
    0%, 68%, 100% { opacity: 0; transform: translateY(0) scale(0.85); }
    8% { opacity: 1; transform: translateY(-4px) scale(1); }
    22% { opacity: 0; transform: translateY(-14px) scale(0.9); }
}
.demo-feed__hit--back {
    top: 7%;
    left: 3%;
    width: 14%;
    height: 6%;
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
}
#demoScreen.is-behind-feed-detail,
#demoScreen.is-behind-feed-video {
    opacity: 0;
    transform: translateX(-12%);
}
.demo-chat__tap-overlay,
.demo-chat__hit {
    visibility: hidden;
    pointer-events: none;
}
.device-screen--demo.is-chat-demo:not(:has(.demo-chat.is-open)) .demo-chat__tap-overlay {
    visibility: visible;
    pointer-events: none;
}
.device-screen--demo.is-chat-demo:not(:has(.demo-chat.is-open)) .demo-chat__hit {
    visibility: visible;
    pointer-events: auto;
}
.device-screen--demo:has(.demo-chat.is-open) .demo-chat__tap-overlay,
.device-screen--demo:has(.demo-chat.is-open) .demo-chat__hit {
    visibility: hidden;
    pointer-events: none;
}
.demo-chat__tap-overlay {
    position: absolute;
    z-index: 8;
    pointer-events: none;
}
.demo-chat__tap-overlay--thread {
    top: 27%;
    left: 4%;
    width: 92%;
    height: 11%;
}
.demo-chat__tap-overlay--thread::after {
    left: 12%;
}
.demo-chat__hit {
    position: absolute;
    z-index: 9;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}
.demo-chat__hit--thread {
    top: 27%;
    left: 4%;
    width: 92%;
    height: 11%;
}
.demo-chat {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    background: #f5f5f5;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    pointer-events: none;
}
.demo-chat.is-open {
    transform: translateX(0);
    pointer-events: auto;
}
.demo-chat[hidden] {
    display: none !important;
}
.demo-profile:not(.is-open) {
    pointer-events: none;
}
.demo-chat__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.demo-chat__screen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.demo-chat__sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    pointer-events: none;
}
.demo-chat__sheet.is-open {
    transform: translateY(0);
    pointer-events: auto;
}
.demo-chat__sheet img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}
.demo-chat__tap-overlay--plus,
.demo-chat__hit--plus {
    visibility: hidden;
    pointer-events: none;
}
.demo-chat.is-open:not(.is-sheet-open) .demo-chat__tap-overlay--plus {
    visibility: visible;
    pointer-events: none;
}
.demo-chat.is-open:not(.is-sheet-open) .demo-chat__hit--plus {
    visibility: visible;
    pointer-events: auto;
}
.demo-chat__tap-overlay--plus {
    bottom: 2.8%;
    right: 3.5%;
    top: auto;
    left: auto;
    width: 11%;
    height: 6.5%;
}
.demo-chat__tap-overlay--plus::after {
    left: 50%;
}
.demo-chat__hit--plus {
    bottom: 2.8%;
    right: 3.5%;
    top: auto;
    left: auto;
    width: 11%;
    height: 6.5%;
}
#demoScreen.is-behind-chat {
    opacity: 0;
    transform: translateX(-12%);
}
.demo-profile {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.demo-profile.is-open {
    transform: translateX(0);
}
.demo-profile__viewport {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
.demo-profile__scroll {
    will-change: transform;
}
.demo-profile__scroll img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
}
.demo-profile__hit {
    position: absolute;
    z-index: 6;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}
.demo-profile__tap-overlay {
    position: absolute;
    z-index: 7;
    pointer-events: none;
}
.demo-profile__tap-overlay--info {
    top: 33.2%;
    left: 21%;
    width: 28%;
    height: 4.6%;
}
.demo-profile__tap-overlay--feed {
    top: 33.2%;
    left: 49%;
    width: 28%;
    height: 4.6%;
}
.demo-profile__tap-overlay::after,
.demo-home__tap-overlay::after,
.demo-chat__tap-overlay::after,
.demo-feed__tap-overlay::after,
.demo-gift__tap-overlay::after,
.demo-vip__tap-overlay::after,
.demo-vip__tap-overlay--pay::after,
.demo-feed-video__tap-overlay::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border-radius: 50%;
    opacity: 0;
    border: 2px solid rgba(255, 122, 48, 0.9);
    background: rgba(255, 122, 48, 0.28);
    box-shadow: 0 0 0 0 rgba(255, 122, 48, 0.45);
}
.demo-profile__tap-overlay.is-tap-hint::after,
.demo-home__tap-overlay.is-tap-hint::after,
.demo-chat__tap-overlay.is-tap-hint::after,
.demo-feed__tap-overlay.is-tap-hint::after,
.demo-feed-video__tap-overlay.is-tap-hint::after,
.demo-gift__tap-overlay.is-tap-hint::after,
.demo-vip__tap-overlay.is-tap-hint::after,
.demo-vip__tap-overlay--swipe.is-tap-hint::after,
.demo-vip__tap-overlay--pay.is-tap-hint::after {
    animation: demo-tap-pulse 0.7s ease-out;
}
@keyframes demo-tap-pulse {
    0% {
        opacity: 0.95;
        transform: scale(0.5);
        box-shadow: 0 0 0 0 rgba(255, 122, 48, 0.5);
    }
    45% {
        opacity: 0.8;
        transform: scale(1);
        box-shadow: 0 0 0 0.55rem rgba(255, 122, 48, 0.22);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
        box-shadow: 0 0 0 1.1rem rgba(255, 122, 48, 0);
    }
}
.demo-profile__hit--info {
    top: 33.2%;
    left: 21%;
    width: 28%;
    height: 4.6%;
}
.demo-profile__hit--feed {
    top: 33.2%;
    left: 49%;
    width: 28%;
    height: 4.6%;
}
.demo-profile.is-open:not(.is-feed) .demo-profile__scroll img {
    animation: demo-profile-pan 5.5s ease-in-out forwards;
}
.demo-profile.is-open.is-feed .demo-profile__scroll img {
    animation: demo-profile-pan-feed 4.8s ease-in-out forwards;
}
@keyframes demo-profile-pan {
    0% { transform: translateY(0); }
    100% { transform: translateY(-30%); }
}
@keyframes demo-profile-pan-feed {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20%); }
}
@media (prefers-reduced-motion: reduce) {
    .demo-profile { transition: none; }
    .demo-profile.is-open .demo-profile__scroll img { animation: none; }
    .demo-profile__tap-overlay.is-tap-hint::after,
    .demo-home__tap-overlay.is-tap-hint::after,
    .demo-chat__tap-overlay.is-tap-hint::after,
    .demo-feed__tap-overlay.is-tap-hint::after,
    .demo-feed-video__tap-overlay.is-tap-hint::after,
    .demo-gift__tap-overlay.is-tap-hint::after,
    .demo-vip__tap-overlay.is-tap-hint::after,
    .demo-vip__tap-overlay--swipe.is-tap-hint::after,
    .demo-vip__tap-overlay--pay.is-tap-hint::after { animation: none; opacity: 0.85; transform: scale(1); }
    .demo-gift__sheet { transition: none; }
    .demo-vip__pay { transition: none; }
    .demo-vip__scroll img { transition: none; }
    .demo-vip.is-scrolled .demo-vip__scroll img { transform: translateY(-22%); }
    #demoScreen.is-behind-profile,
    #demoScreen.is-behind-chat,
    #demoScreen.is-behind-feed-detail,
    #demoScreen.is-behind-feed-video { transform: none; }
    .demo-chat { transition: none; }
    .demo-chat__sheet { transition: none; }
    .demo-feed__scroll img { transition: none; }
    .demo-feed-detail,
    .demo-feed-video { transition: none; }
    .demo-feed-detail.is-open .demo-feed-detail__scroll img { animation: none; }
    .demo-feed-video.is-open .demo-feed-video__poster,
    .demo-feed-video__glow,
    .demo-feed-video__progress i,
    .demo-feed-video__heart-ring,
    .demo-feed-video__like-bump,
    .demo-feed-video__swipe-hint { animation: none; }
    .demo-feed-video__track { transition: none; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* Scenarios */
.scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.scenario-card {
    padding: 32px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.scenario-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at top right, var(--brand-soft), transparent 70%);
    pointer-events: none;
}
.scenario-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 10px;
}
.scenario-card p { font-size: 0.9rem; color: var(--ink-3); margin-bottom: 16px; }
.scenario-card ul { list-style: none; }
.scenario-card li {
    font-size: 0.85rem;
    color: var(--ink-2);
    padding: 6px 0;
    border-top: 1px solid var(--line);
}

/* Split feature */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.split ul { list-style: none; margin: 20px 0 24px; }
.split > div > ul > li {
    padding: 8px 0 8px 18px;
    position: relative;
    font-size: 0.92rem;
    color: var(--ink-2);
}
.split > div > ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.1em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
/* 右侧框架图内的 li 不使用 split 列表圆点 */
.feat-admin-split .admin-framework li::before {
    content: none;
    display: none;
}
.split h2,
.split h3 { font-size: 1.45rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.split p { color: var(--ink-3); line-height: 1.65; }
.feat-admin-split {
    gap: 40px;
    align-items: start;
}
.feat-admin-copy {
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 18px;
    max-width: 28em;
}
.feat-admin-copy .section-label { margin-bottom: 0; }
.feat-admin-copy h2 { margin: 0; line-height: 1.25; }
.feat-admin-copy p {
    margin: 0;
    max-width: none;
}
.feat-admin-copy .feat-list {
    flex: none;
    margin: 0;
    max-width: none;
    align-content: start;
}
.feat-admin-copy .btn {
    align-self: flex-start;
    margin-top: 4px;
}
.feat-list--admin {
    gap: 10px;
}
.feat-list--admin li {
    align-self: start;
}
.feat-admin-visual {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    align-self: start;
}
/* 运营后台 · 模块框架图（无浏览器框） */
.admin-framework {
    margin: 0;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    background: #fff;
}
.admin-framework__canvas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 20px 22px 22px;
    background: linear-gradient(165deg, #f8fafc 0%, #eef2f7 100%);
    min-height: 300px;
    box-sizing: border-box;
}
.admin-framework__tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.admin-framework__tier-label {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.admin-framework__org {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px dashed #e2e8f0;
}
.admin-framework__org span {
    font-size: 0.76rem;
    font-weight: 600;
    color: #475569;
    padding: 5px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
}
.admin-framework__org i {
    flex: 0 0 16px;
    height: 2px;
    background: linear-gradient(90deg, #cbd5e1, var(--brand));
    border-radius: 1px;
    font-style: normal;
}
.admin-framework__vline {
    align-self: center;
    width: 2px;
    height: 14px;
    margin: 4px 0;
    background: linear-gradient(180deg, #cbd5e1 0%, color-mix(in srgb, var(--brand) 55%, #cbd5e1) 100%);
    border-radius: 1px;
    opacity: 0.85;
}
.admin-framework__domains {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
}
.admin-framework__domains li {
    font-size: 0.74rem;
    font-weight: 600;
    color: #334155;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.admin-framework__tier--mods {
    flex: 1;
    justify-content: flex-start;
}
.admin-framework__map {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}
.admin-framework__map::before {
    content: "";
    position: absolute;
    top: 52px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0 8%, #e2e8f0 92%, transparent);
    pointer-events: none;
}
.admin-framework__hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, #fff) 0%, var(--brand-deep) 100%);
    color: #fff;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 35%, transparent);
    position: relative;
    z-index: 1;
}
.admin-framework__hub-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.92;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.admin-framework__hub strong {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.admin-framework__mods {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    position: relative;
    z-index: 1;
}
.admin-framework__mods li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 8px 6px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-framework__mods li b {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.admin-framework__mods li span {
    font-size: 0.76rem;
    font-weight: 700;
    color: #334155;
}
.admin-framework__caption {
    margin: 0;
    padding: 10px 14px 12px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ink-3);
    background: #fafbfc;
    border-top: 1px solid var(--line);
}
@media (hover: hover) {
    .admin-framework__mods li:hover {
        border-color: color-mix(in srgb, var(--brand) 35%, #e2e8f0);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    }
}
.admin-panel {
    padding: 36px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #1e2430, #151922);
    color: #fff;
    min-height: 320px;
}
.admin-panel h4 { font-size: 1.1rem; margin-bottom: 8px; }
.admin-panel p { font-size: 0.88rem; color: rgba(255,255,255,0.6); margin-bottom: 20px; }
.admin-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-tags span {
    padding: 6px 12px;
    font-size: 0.75rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
}
.admin-tags--light span {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink-2);
}
.feat-admin-visual--home {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}
.admin-dash-fig {
    margin: 0;
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    background: #fff;
}
.admin-dash-fig__window {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-dash-fig__screen {
    overflow: hidden;
    background: #f4f6f9;
    aspect-ratio: 16 / 10;
}
.admin-dash-fig img {
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    object-position: top left;
}
.feat-admin-visual__caption {
    margin: 0;
    padding: 10px 12px 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ink-3);
}
.laptop-mock {
    margin: 0;
    width: 100%;
    max-width: 560px;
}
.laptop-mock__lid {
    padding: 10px 10px 0;
    background: linear-gradient(180deg, #3d3d42 0%, #2a2a2e 100%);
    border: 1px solid #1f1f23;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 20px 50px rgba(12, 15, 20, 0.15);
}
.laptop-mock__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #323238;
    border-radius: 8px 8px 0 0;
}
.laptop-mock__chrome span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5c5c66;
}
.laptop-mock__chrome span:nth-child(1) { background: #ff5f57; }
.laptop-mock__chrome span:nth-child(2) { background: #febc2e; }
.laptop-mock__chrome span:nth-child(3) { background: #28c840; }
.laptop-mock__screen {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef1f5;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: none;
}
.laptop-mock__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}
.laptop-mock__base {
    height: 12px;
    margin: 0 12%;
    background: linear-gradient(180deg, #c8c8cc 0%, #9a9aa0 100%);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(12, 15, 20, 0.12);
}
.laptop-mock__base::after {
    content: "";
    display: block;
    width: 18%;
    height: 4px;
    margin: 4px auto 0;
    background: #b0b0b6;
    border-radius: 0 0 4px 4px;
}
.laptop-mock__caption {
    margin-top: 12px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ink-3);
}

/* Tech */
.arch-diagram {
    margin-bottom: 40px;
    padding: 28px 32px 24px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
}
.arch-diagram-title {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 20px;
}
.arch-diagram-svg {
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.arch-diagram-svg svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 640px;
}
.arch-diagram-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-3);
    margin-top: 18px;
    line-height: 1.6;
}
.arch-diagram-note strong {
    color: var(--ink-2);
    font-weight: 700;
}
.tech-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.tech-box {
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.tech-box h3 { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.tech-box .sub { font-size: 0.85rem; color: var(--ink-3); margin-bottom: 18px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
    padding: 7px 13px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-2);
}

/* Compare */
.compare {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
}
.compare table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.compare th, .compare td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: left; }
.compare th { background: var(--bg); font-weight: 700; color: var(--ink); }
.compare th.hl, .compare td.hl { background: var(--brand-soft); }
.compare tr:last-child td { border-bottom: none; }

/* Process */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.step-card {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.step-card .num {
    font-size: 2rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px var(--brand);
    line-height: 1;
    margin-bottom: 12px;
}
.step-card h4 { font-size: 0.98rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.step-card p { font-size: 0.84rem; color: var(--ink-3); }

/* Lead form */
.lead-section {
    padding: 88px 0;
    background: linear-gradient(180deg, var(--brand-soft) 0%, var(--bg) 100%);
}
.lead-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: start;
}
.lead-copy h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.lead-copy p { color: var(--ink-3); margin-bottom: 24px; }
.lead-list { list-style: none; }
.lead-list li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink-2);
}
.lead-list li strong { display: block; color: var(--ink); font-size: 0.92rem; }
.lead-copy .lead-list + .btn {
    margin-top: 20px;
}
.lead-form {
    padding: 36px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.form-group label .req { color: var(--brand); }
.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
textarea.form-control { min-height: 110px; resize: vertical; }
.form-note { font-size: 0.78rem; color: var(--ink-3); margin-top: 12px; }
.form-submit { width: 100%; margin-top: 8px; }

/* CTA band */
.cta-band {
    padding: 72px 0;
    text-align: center;
    background: var(--dark);
    color: #fff;
}
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,0.62); margin-bottom: 28px; }
.cta-band .btn-secondary { border-color: rgba(255,255,255,0.2); color: #fff; background: transparent; margin-left: 8px; }

/* Footer */
.footer {
    padding: 56px 0 28px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 36px;
    margin-bottom: 40px;
}
.footer-brand p { margin-top: 14px; font-size: 0.88rem; color: var(--ink-3); max-width: 300px; }
.footer-col h5 { font-size: 0.78rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col a { font-size: 0.88rem; color: var(--ink-3); line-height: 2; }
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--ink-3);
}

/* Toast */
.form-toast {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 14px 22px;
    background: var(--ink);
    color: #fff;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s var(--ease);
    z-index: 300;
}
.form-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Sticky mobile CTA */
.sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 190;
    padding: 10px 16px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    gap: 10px;
}
.sticky-cta a { flex: 1; text-align: center; padding: 12px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; }
.sticky-cta .ghost { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.sticky-cta .primary { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; }

/* Float consult */
.float-consult {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 180;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 28px var(--brand-ring);
    font-size: 0.72rem;
    font-weight: 700;
    transition: transform 0.2s;
}
.float-consult:hover { transform: scale(1.06); }

/* Page shell */
.page-hero {
    padding: calc(var(--nav-h) + 56px) 0 48px;
    text-align: center;
    background: linear-gradient(180deg, #fff, var(--bg));
}
.page-hero h1 { font-size: 2rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.page-hero p { color: var(--ink-3); }
.page-body { padding: 48px 0 88px; text-align: center; }
.page-body .btn { margin-top: 20px; }

/* Products / Pricing page hero */
.page-hero--products,
.page-hero--pricing,
.page-hero--advantages,
.page-hero--news,
.page-hero--about {
    position: relative;
    padding-bottom: 48px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 55% at 50% -8%, rgba(255, 138, 101, 0.2), transparent 58%),
        radial-gradient(ellipse 42% 38% at 100% 85%, rgba(255, 107, 74, 0.09), transparent 52%),
        radial-gradient(ellipse 38% 32% at 0% 75%, rgba(255, 193, 120, 0.1), transparent 48%),
        linear-gradient(180deg, #fff 0%, #fafbfc 70%, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
}
.page-hero--products::before,
.page-hero--pricing::before,
.page-hero--advantages::before,
.page-hero--news::before,
.page-hero--about::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(12, 15, 20, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 15, 20, 0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 15%, transparent 75%);
    pointer-events: none;
}
.page-hero--products::after,
.page-hero--pricing::after,
.page-hero--advantages::after,
.page-hero--news::after,
.page-hero--about::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.65) 0%, transparent 22%),
        radial-gradient(circle at 82% 55%, rgba(255, 245, 240, 0.45) 0%, transparent 28%);
    pointer-events: none;
}
.page-hero--products > .container,
.page-hero--pricing > .container,
.page-hero--advantages > .container,
.page-hero--news > .container,
.page-hero--about > .container {
    position: relative;
    z-index: 1;
}
.page-hero--products .section-label,
.page-hero--pricing .section-label,
.page-hero--advantages .section-label,
.page-hero--news .section-label,
.page-hero--about .section-label {
    display: inline-block;
    margin-bottom: 12px;
}
.page-hero--products h1,
.page-hero--pricing h1,
.page-hero--advantages h1,
.page-hero--news h1,
.page-hero--about h1 {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 10px;
}
.page-hero--products > .container > p,
.page-hero__lead {
    max-width: 36em;
    margin: 0 auto 20px;
    color: var(--ink-3);
    font-size: 1.02rem;
    line-height: 1.7;
    text-wrap: pretty;
}
.page-hero__stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    margin-bottom: 24px;
}
.page-hero__stats li {
    font-size: 0.88rem;
    color: var(--ink-3);
}
.page-hero__stats strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--brand-deep);
    margin-right: 4px;
}
.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Pricing / Advantages page hero */
.page-hero--pricing,
.page-hero--advantages,
.page-hero--news,
.page-hero--about { padding-bottom: 44px; }

/* About page */
.about-hero__site {
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--ink-3);
}
.about-hero__site a {
    font-weight: 600;
    color: var(--brand-deep);
}
.section-head--left {
    text-align: left;
    margin-inline: 0;
}
.section-head--left p {
    margin-inline: 0;
}
.about-section-intro {
    padding: 64px 0 72px;
}
.about-intro--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 40px;
    align-items: stretch;
}
.about-intro__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 8px 0;
}
.about-intro__copy .section-label {
    display: inline-block;
    margin-bottom: 10px;
}
.about-intro__copy h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 16px;
}
.about-intro__lead {
    font-size: 0.96rem;
    line-height: 1.75;
    color: var(--ink-2);
    margin-bottom: 12px;
}
.about-intro__copy > p:not(.about-intro__lead):not(.about-intro__site) {
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--ink-2);
    margin-bottom: 18px;
}
.about-intro__points {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
}
.about-intro__points li {
    position: relative;
    padding-left: 16px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.about-intro__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
.about-intro__site {
    font-size: 0.86rem;
    color: var(--ink-3);
    margin: 0;
}
.about-intro__site a {
    font-weight: 700;
    color: var(--brand-deep);
}
.about-intro__visual {
    justify-self: end;
    margin: 0 0 0 auto;
    width: 100%;
    max-width: min(100%, 420px);
    height: auto;
    align-self: center;
}
.about-enterprise-card {
    margin: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
}
.about-enterprise-card__caption {
    margin: 0;
    padding: 10px 14px 12px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ink-3);
    background: #fafbfc;
    border-top: 1px solid var(--line);
}
.about-enterprise-illus {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 8px 8px 0;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.about-intro-illus__tags {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    pointer-events: none;
}
.about-intro-illus__tags span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--brand-deep);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 107, 74, 0.2);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.about-enterprise-illus__img {
    display: block;
    flex: 1;
    width: 100%;
    min-height: 200px;
    max-height: 280px;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
}
.about-certs {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.about-certs li {
    padding: 20px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.about-certs strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 6px;
}
.about-certs span {
    font-size: 0.8rem;
    color: var(--ink-3);
    line-height: 1.5;
}
.about-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.about-services__card {
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.about-services__card h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--ink);
}
.about-services__card p {
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--ink-3);
    margin-bottom: 14px;
}
.about-services__card a {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--brand-deep);
    text-decoration: none;
}
.about-services__card a:hover {
    text-decoration: underline;
}
.about-contact__panel {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.04);
}
.about-contact__panel-main {
    padding: 28px 28px 26px;
}
.about-contact__panel-side {
    padding: 28px 24px;
    background: var(--brand-soft);
    border-left: 1px solid rgba(255, 107, 74, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about-contact__panel-side-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 14px;
    letter-spacing: 0.02em;
}
.about-contact__panel-side ul {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 0;
}
.about-contact__panel-side li {
    position: relative;
    padding-left: 14px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.about-contact__panel-side li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}
.about-contact__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
    margin-bottom: 22px;
}
.about-contact__meta-item--wide {
    grid-column: 1 / -1;
}
.about-contact__meta-item strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-3);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.about-contact__meta-item > span,
.about-contact__meta-item > a {
    display: block;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.about-contact__meta-item > a {
    color: var(--brand-deep);
    font-weight: 700;
    font-size: 1.02rem;
}
.about-contact__meta-item .about-contact__map-actions {
    margin-top: 8px;
}
.about-contact__meta-item .about-contact__map-actions a {
    font-size: 0.82rem;
}
.about-contact__hint {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 12px 0 0;
}
.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
.about-contact__company {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 16px;
}
.about-contact__note {
    display: block;
    font-size: 0.78rem;
    color: var(--ink-3);
    margin-top: 4px;
}
.about-contact .about-contact__tip {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--ink-3);
}
.about-contact__tip {
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--ink-3);
}
.about-contact__tip a {
    color: var(--brand-deep);
}
.about-contact__map-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-deep);
    text-decoration: none;
}
.about-contact__map-link:hover {
    text-decoration: underline;
}
.about-contact__map-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-3);
    margin: 0 0 4px;
    letter-spacing: 0.02em;
}
.about-contact__info .about-contact__map,
.lead-copy .about-contact__map {
    margin-top: 18px;
    margin-bottom: 20px;
}
.about-contact__map {
    margin-top: 28px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 107, 74, 0.12);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 100%);
}
.about-contact__map-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.about-contact__map-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(255, 107, 74, 0.14);
    color: var(--brand);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.about-contact__map-icon svg {
    width: 22px;
    height: 22px;
}
.about-contact__map-body {
    flex: 1;
    min-width: 0;
}
.about-contact__map-addr {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 10px;
}
.about-contact__map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.about-contact__map-actions a {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--brand-deep);
    text-decoration: none;
}
.about-contact__map-actions a:hover {
    text-decoration: underline;
}
.about-contact__map-actions a:not(:last-child)::after {
    content: "·";
    margin-left: 18px;
    color: var(--ink-3);
    font-weight: 400;
    pointer-events: none;
}
.contact-map-wrap {
    margin-top: 28px;
}
@media (max-width: 640px) {
    .about-contact__map { padding: 16px; }
    .about-contact__map-card { gap: 12px; }
    .about-contact__map-actions a:not(:last-child)::after { display: none; }
    .about-contact__map-actions { flex-direction: column; gap: 6px; }
}

/* News listing */
.news-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
}
.news-filter__btn {
    padding: 8px 16px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.news-filter__btn:hover {
    color: var(--brand-deep);
    border-color: rgba(255, 107, 74, 0.25);
}
.news-filter__btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border-color: transparent;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.news-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.news-card:hover {
    border-color: rgba(255, 107, 74, 0.28);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.news-card--featured {
    grid-column: span 2;
}
.news-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px 20px;
    text-decoration: none;
    color: inherit;
}
.news-card__tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-deep);
    background: var(--brand-soft);
    border-radius: 6px;
}
.news-card__date {
    font-size: 0.78rem;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.news-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 10px;
}
.news-card__excerpt {
    flex: 1;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--ink-3);
    margin-bottom: 14px;
}
.news-card__more {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-deep);
}
.news-empty {
    text-align: center;
    padding: 32px;
    font-size: 0.9rem;
    color: var(--ink-3);
}
.news-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    padding-top: 8px;
}
.news-pagination__btn {
    padding: 8px 16px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, opacity 0.2s;
}
.news-pagination__btn:hover:not(:disabled) {
    color: var(--brand-deep);
    border-color: rgba(255, 107, 74, 0.3);
}
.news-pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.news-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.news-pagination__page {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.news-pagination__page:hover {
    color: var(--brand-deep);
    border-color: rgba(255, 107, 74, 0.25);
}
.news-pagination__page.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border-color: transparent;
}
.news-subscribe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.news-subscribe__copy h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.news-subscribe__copy p {
    font-size: 0.88rem;
    color: var(--ink-3);
    max-width: 36em;
}

/* News article detail */
.news-article-page {
    padding: 32px 0 72px;
    margin-top: 60px;
}
.news-article__inner {
    max-width: 720px;
    margin: 0 auto;
}
.news-article__back {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink-3);
    text-decoration: none;
}
.news-article__back:hover {
    color: var(--brand-deep);
}
.news-article__head {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.news-article__head time {
    display: block;
    font-size: 0.82rem;
    color: var(--ink-3);
    margin: 8px 0 12px;
}
.news-article__head h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 12px;
}
.news-article__lead {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ink-2);
}
.news-article__body h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    margin: 28px 0 10px;
}
.news-article__body h2:first-child {
    margin-top: 0;
}
.news-article__body p {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--ink-2);
    margin-bottom: 12px;
}
.news-article__body ul {
    margin: 0 0 16px 1.2em;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--ink-2);
}
.news-article__body li {
    margin-bottom: 6px;
}
.news-article__body strong {
    color: var(--ink);
    font-weight: 700;
}
.news-article__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

/* Advantages page */
.adv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.adv-card {
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.adv-card:hover {
    border-color: rgba(255, 107, 74, 0.28);
    box-shadow: var(--shadow-lg);
}
.adv-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    font-size: 1.35rem;
    background: var(--brand-soft);
    border-radius: 12px;
}
.adv-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
}
.adv-card p {
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--ink-3);
}
.adv-card strong {
    color: var(--brand-deep);
    font-weight: 700;
}
.adv-audience {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.adv-audience__card {
    padding: 22px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.adv-audience__card h3 {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 10px;
}
.adv-audience__pain {
    font-size: 0.8rem;
    color: var(--ink-3);
    margin-bottom: 8px;
    padding-left: 12px;
    border-left: 3px solid #e0e0e0;
}
.adv-audience__solve {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.adv-tech {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
    align-items: start;
}
.adv-tech__list {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}
.adv-tech__list li {
    position: relative;
    padding-left: 16px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink-2);
}
.adv-tech__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
.adv-tech__list strong {
    color: var(--ink);
    font-weight: 700;
}
.adv-tech__tags {
    display: grid;
    gap: 14px;
}
.adv-service {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.adv-service__item {
    padding: 22px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.adv-service__num {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--brand-deep);
    margin-bottom: 10px;
}
.adv-service__item h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
}
.adv-service__item p {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-3);
}
.adv-trust {
    padding: 28px 24px;
    background: linear-gradient(135deg, var(--brand-soft), rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(255, 107, 74, 0.15);
    border-radius: var(--radius-lg);
}
.adv-trust__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    text-align: center;
}
.adv-trust__list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.adv-trust__list strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
}
.adv-trust__list span {
    font-size: 0.8rem;
    color: var(--ink-3);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 16px;
}
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.pricing-card--featured {
    border-color: rgba(255, 107, 74, 0.35);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 107, 74, 0.12);
}
.pricing-card__badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border-radius: 999px;
    white-space: nowrap;
}
.pricing-card__name {
    font-size: clamp(0.92rem, 2.1vw, 1.05rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 4px;
}
.pricing-card__scope {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-deep);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}
.pricing-card__desc {
    font-size: 0.84rem;
    color: var(--ink-3);
    line-height: 1.5;
    margin-bottom: 18px;
    min-height: 2.6em;
}
.pricing-card__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 20px;
}
.pricing-card__value {
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--brand-deep);
    line-height: 1;
}
.pricing-card__value--full {
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
}
.pricing-card__unit {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-3);
}
.pricing-card__features {
    list-style: none;
    flex: 1;
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
    text-align: left;
}
.pricing-card__features li {
    position: relative;
    padding-left: 18px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.pricing-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
.pricing-card__cta {
    display: block;
    width: 100%;
    padding: 12px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.pricing-card__cta:hover {
    color: var(--brand-deep);
    background: var(--brand-soft);
    border-color: rgba(255, 107, 74, 0.25);
}
.pricing-card--featured .pricing-card__cta {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border-color: transparent;
}
.pricing-card--featured .pricing-card__cta:hover {
    color: #fff;
    filter: brightness(1.05);
}
.pricing-compare {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--line);
}
.pricing-compare .section-head {
    margin-bottom: 28px;
}
.pricing-note {
    max-width: 52em;
    margin: 0 auto;
    padding: 14px 18px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--ink-3);
    text-align: center;
    background: var(--brand-soft);
    border: 1px solid rgba(255, 107, 74, 0.12);
    border-radius: var(--radius);
}
.pricing-ops {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.pricing-ops__card {
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.pricing-ops__card h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
}
.pricing-ops__card p {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.pricing-ops__card ul {
    list-style: none;
    display: grid;
    gap: 6px;
}
.pricing-ops__card li {
    font-size: 0.82rem;
    color: var(--ink-2);
    padding-left: 14px;
    position: relative;
}
.pricing-ops__card li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--brand);
    font-weight: 800;
}
.compare--pricing { margin-top: 8px; }
.compare--pricing th,
.compare--pricing td { font-size: 0.88rem; }

/* Version feature matrix (pricing page) */
.compare--versions {
    margin-top: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.compare--versions table { min-width: 720px; }
.compare--versions th,
.compare--versions td {
    font-size: 0.84rem;
    vertical-align: middle;
    padding: 12px 16px;
}
.compare--versions tbody tr:not(.compare-versions__group):nth-child(even) td {
    background: rgba(0, 0, 0, 0.015);
}
.compare--versions tbody tr:not(.compare-versions__group):hover td {
    background: rgba(99, 102, 241, 0.04);
}
.compare--versions th:first-child,
.compare--versions td:first-child {
    min-width: 13.5em;
    font-weight: 500;
    color: var(--ink-2);
}
.compare--versions thead th {
    vertical-align: bottom;
    padding-top: 18px;
    padding-bottom: 14px;
}
.compare-versions__plan {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 4px;
}
.compare-versions__price {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-deep);
}
.compare-versions__group td {
    padding: 10px 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.02));
    border-bottom: 1px solid var(--line);
}
.compare--versions td:not(:first-child) {
    text-align: center;
    vertical-align: middle;
}
.compare-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}
.compare-mark--yes::before {
    content: "✓";
    color: #4f46e5;
}
.compare-mark--no::before {
    content: "—";
    color: #c4c8d0;
    font-weight: 500;
}
.compare-mark--partial {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-deep);
    white-space: nowrap;
}
.compare-versions__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 24px;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--ink-3);
}
.compare-versions__legend .compare-mark {
    margin-right: 4px;
}
.compare-versions__delivery {
    margin-top: 20px;
    padding: 18px 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.compare-versions__delivery-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 10px;
}
.compare-versions__delivery ul {
    list-style: none;
    display: grid;
    gap: 8px;
}
.compare-versions__delivery li {
    position: relative;
    padding-left: 14px;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.compare-versions__delivery li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}
.compare-versions__delivery strong {
    color: var(--ink);
    font-weight: 700;
}
.pricing-faq {
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}
.pricing-faq__item {
    padding: 18px 20px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.pricing-faq__item h3 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}
.pricing-faq__item p {
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--ink-3);
}
.feat-nav {
    position: sticky;
    top: var(--nav-h);
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-block: 1px solid var(--line);
}
.feat-nav__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.feat-nav__inner::-webkit-scrollbar { display: none; }
.feat-nav__link {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-3);
    text-decoration: none;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
}
.feat-nav__link:hover { color: var(--ink); background: var(--bg); }
.feat-nav__link.is-active {
    color: var(--brand-deep);
    background: var(--brand-soft);
}
.feat-module { scroll-margin-top: calc(var(--nav-h) + 52px); }
/* 文案+机框作为一组整体居中，避免栅格内对齐导致整页视觉偏左/偏右 */
.feat-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 5vw, 64px);
    max-width: 1020px;
    margin-inline: auto;
}
.feat-split--reverse {
    flex-direction: row-reverse;
}
.feat-split .feat-copy {
    flex: 1 1 300px;
    max-width: 34rem;
    min-width: 0;
}
.feat-split .feat-visual {
    flex: 0 0 auto;
}
.feat-tag {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--brand-deep);
}
.feat-copy h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.feat-copy > p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ink-3);
    margin-bottom: 18px;
    max-width: 46ch;
}
.feat-list {
    list-style: none;
    display: grid;
    gap: 8px;
}
.feat-list li {
    position: relative;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.feat-list:not(.feat-list--admin) li {
    padding-left: 16px;
}
.feat-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}
/* 运营后台说明卡：网格对齐圆点与标题 */
.feat-list.feat-list--admin > li {
    display: grid;
    grid-template-columns: 6px 1fr;
    column-gap: 10px;
    row-gap: 4px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    line-height: 1.5;
}
.feat-list.feat-list--admin > li::before {
    position: static;
    align-self: center;
    justify-self: center;
    width: 6px;
    height: 6px;
    margin: 0;
}
.feat-list.feat-list--admin > li strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.feat-list.feat-list--admin > li span {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.84rem;
    color: var(--ink-2);
    line-height: 1.55;
}
.feat-list--compact { gap: 6px; }
.feat-list--compact li { font-size: 0.8rem; }
.device--feat {
    width: min(280px, 100%);
    margin-inline: auto;
    box-shadow: var(--shadow-lg);
}
.device--feat .device-notch {
    display: none;
}
.feat-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 360px;
    align-self: center;
    padding: 24px 28px;
    box-sizing: border-box;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 107, 74, 0.1), transparent 60%),
        var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.feat-pay-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}
.feat-pay-card {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}
.feat-pay-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.feat-pay-card__icon { font-size: 1.35rem; }
.feat-pay-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
}
.feat-pay-card > p {
    font-size: 0.85rem;
    color: var(--ink-3);
    line-height: 1.55;
    margin-bottom: 12px;
}
.feat-pay-card .feat-list { margin-bottom: 14px; flex: 1; }
.feat-pay-card__shot {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    height: 200px;
}
/* 变现卡片插画（礼物 / VIP） */
.feat-pay-illus {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.feat-pay-illus--gift {
    background:
        radial-gradient(ellipse 90% 70% at 20% 0%, rgba(255, 143, 120, 0.35), transparent 55%),
        radial-gradient(ellipse 70% 60% at 90% 100%, rgba(255, 193, 120, 0.28), transparent 50%),
        linear-gradient(155deg, #fff8f5 0%, #ffe8df 48%, #ffd4c8 100%);
}
.feat-pay-illus--vip {
    background:
        radial-gradient(ellipse 80% 70% at 80% 10%, rgba(255, 210, 120, 0.45), transparent 55%),
        radial-gradient(ellipse 60% 50% at 10% 90%, rgba(255, 107, 74, 0.15), transparent 50%),
        linear-gradient(145deg, #fffaf0 0%, #fff1d6 45%, #ffe4b8 100%);
}
.feat-pay-illus__chat {
    position: absolute;
    top: 18px;
    left: 16px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.feat-pay-illus__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc9b8, #ff8a65);
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(255, 107, 74, 0.2);
    flex-shrink: 0;
}
.feat-pay-illus__bubble {
    width: 72px;
    padding: 8px 10px;
    border-radius: 12px 12px 12px 4px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(12, 15, 20, 0.06);
}
.feat-pay-illus__bubble-line {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #eceff3;
}
.feat-pay-illus__bubble-line + .feat-pay-illus__bubble-line {
    margin-top: 5px;
    width: 70%;
}
.feat-pay-illus__gift-send {
    position: absolute;
    top: 52px;
    right: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.feat-pay-illus__gift-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(145deg, #ff8a65, #ff6b4a);
    box-shadow: 0 10px 24px rgba(255, 107, 74, 0.35);
    position: relative;
}
.feat-pay-illus__gift-icon::before {
    content: "";
    position: absolute;
    inset: 10px 12px 14px;
    border-radius: 4px;
    background: #fff5f0;
    opacity: 0.9;
}
.feat-pay-illus__gift-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 6px;
    transform: translateY(-50%);
    background: #ff6b4a;
    border-radius: 2px;
}
.feat-pay-illus__gift-trail {
    width: 3px;
    height: 28px;
    margin-top: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 107, 74, 0.5), transparent);
}
.feat-pay-illus__wall {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 20px rgba(255, 107, 74, 0.1);
    backdrop-filter: blur(6px);
}
.feat-pay-illus__wall-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ink-3);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}
.feat-pay-illus__wall-row {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}
.feat-pay-illus__wall-row i {
    display: block;
    flex: 1;
    height: 32px;
    max-width: 36px;
    border-radius: 8px;
    background: linear-gradient(160deg, #ffd4c8, #ff9f7f);
    box-shadow: inset 0 -2px 0 rgba(255, 107, 74, 0.15);
}
.feat-pay-illus__wall-row i:nth-child(2) { background: linear-gradient(160deg, #ffe0b8, #ffb74d); }
.feat-pay-illus__wall-row i:nth-child(3) { background: linear-gradient(160deg, #f8bbd0, #f48fb1); }
.feat-pay-illus__wall-row i:nth-child(4) { background: linear-gradient(160deg, #c5e1a5, #81c784); }
.feat-pay-illus__wall-row i:nth-child(5) { background: linear-gradient(160deg, #b3e5fc, #4fc3f7); }
.feat-pay-illus__coin {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffe082, #ffb300);
    border: 2px solid #fff8e1;
    box-shadow: 0 4px 8px rgba(255, 179, 0, 0.35);
}
.feat-pay-illus__coin::after {
    content: "¥";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.55rem;
    font-weight: 800;
    color: #e65100;
}
.feat-pay-illus__coin--a { top: 36px; right: 88px; }
.feat-pay-illus__coin--b { bottom: 58px; right: 22px; width: 14px; height: 14px; }
.feat-pay-illus__vip-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(200px, 78%);
    padding: 18px 16px 14px;
    border-radius: 16px;
    background: linear-gradient(155deg, #2a2118 0%, #1a1510 100%);
    box-shadow:
        0 16px 40px rgba(26, 21, 16, 0.35),
        0 0 0 1px rgba(255, 210, 120, 0.25) inset;
    text-align: center;
}
.feat-pay-illus__vip-crown {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 22px;
    background: linear-gradient(180deg, #ffd54f, #ff8f00);
    clip-path: polygon(50% 0%, 68% 38%, 100% 38%, 74% 62%, 86% 100%, 50% 76%, 14% 100%, 26% 62%, 0% 38%, 32% 38%);
    filter: drop-shadow(0 4px 6px rgba(255, 143, 0, 0.4));
}
.feat-pay-illus__vip-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #3e2723;
    background: linear-gradient(90deg, #ffe082, #ffb300);
    border-radius: 999px;
}
.feat-pay-illus__vip-title {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff8e1;
}
.feat-pay-illus__vip-perks {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}
.feat-pay-illus__vip-perks li {
    padding: 3px 8px;
    font-size: 0.62rem;
    font-weight: 600;
    color: #ffe082;
    background: rgba(255, 224, 130, 0.12);
    border: 1px solid rgba(255, 224, 130, 0.25);
    border-radius: 999px;
}
.feat-pay-illus__vip-plans {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.feat-pay-illus__vip-plans span {
    padding: 4px 10px;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 248, 225, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.feat-pay-illus__vip-plans .is-hot {
    color: #3e2723;
    background: linear-gradient(90deg, #ffe082, #ffb300);
}
.feat-pay-illus__spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd54f;
    box-shadow: 0 0 10px #ffb300;
}
.feat-pay-illus__spark--1 { top: 24px; left: 24px; }
.feat-pay-illus__spark--2 { top: 48px; right: 32px; width: 4px; height: 4px; }
.feat-pay-illus__spark--3 { bottom: 28px; left: 40px; width: 5px; height: 5px; opacity: 0.8; }
.feat-account {
    padding: 24px 28px;
    background: linear-gradient(135deg, #fff 0%, var(--brand-soft) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.feat-account h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 16px;
}
.feat-account__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.feat-account__item strong {
    display: block;
    font-size: 0.9rem;
    color: var(--ink);
    margin-bottom: 4px;
}
.feat-account__item p {
    font-size: 0.8rem;
    color: var(--ink-3);
    line-height: 1.45;
}
/* 后台模块一览 · 图文交替 */
.admin-modules {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid var(--line);
}
.admin-modules__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
}
.admin-modules__head h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 10px;
}
.admin-modules__head p {
    font-size: 0.9rem;
    color: var(--ink-3);
    line-height: 1.6;
}
.admin-module-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 48px;
    align-items: center;
    padding: 36px 0;
    border-bottom: 1px solid var(--line);
}
.admin-module-row:last-child { border-bottom: none; padding-bottom: 0; }
.admin-module-row:first-of-type { padding-top: 0; }
.admin-module-row--reverse .admin-module-row__visual { order: 2; }
.admin-module-row--reverse .admin-module-row__copy { order: 1; }
.admin-module-row__tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.admin-module-row__copy h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 10px;
}
.admin-module-row__copy > p {
    font-size: 0.9rem;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 14px;
}
.admin-module-row__visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.admin-ui-preview {
    --admin-accent: var(--brand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #f4f6f9;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 10;
}
/* 后台模块插图 · 统一清爽风格 */
.admin-ui-preview--illus {
    --dash-green: #22c55e;
    --dash-blue: #3b82f6;
    --admin-accent: var(--brand);
    aspect-ratio: 16 / 10;
    background: linear-gradient(165deg, #f8fafc 0%, #eef2f7 100%);
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}
.admin-ui-preview--biz { --admin-accent: #3b82f6; }
.admin-ui-preview--crm { --admin-accent: #10b981; }
.admin-ui-preview--finance { --admin-accent: #f59e0b; }
.admin-ui-preview--marketing { --admin-accent: #ec4899; }
.admin-ui-preview--system { --admin-accent: #64748b; }
.admin-ui-preview--illus:not(.admin-ui-preview--dash) .admin-dash-illus__nav span.is-active {
    background: color-mix(in srgb, var(--admin-accent) 22%, transparent);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--admin-accent);
}
.admin-ui-preview--illus:not(.admin-ui-preview--dash) .admin-dash-illus__bars i::after {
    background: linear-gradient(90deg, var(--admin-accent) 0%, color-mix(in srgb, var(--admin-accent) 55%, #fff) 100%);
}
.admin-dash-illus__chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.admin-dash-illus__dots {
    display: inline-flex;
    gap: 5px;
}
.admin-dash-illus__dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
    font-style: normal;
}
.admin-dash-illus__dots i:nth-child(1) { background: #fca5a5; }
.admin-dash-illus__dots i:nth-child(2) { background: #fcd34d; }
.admin-dash-illus__dots i:nth-child(3) { background: #86efac; }
.admin-dash-illus__url {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 500;
}
.admin-dash-illus__frame {
    flex: 1;
    display: flex;
    min-height: 0;
    padding: 10px;
    gap: 10px;
}
.admin-dash-illus__nav {
    flex: 0 0 22%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px;
    background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.admin-dash-illus__nav span {
    font-size: 0.54rem;
    color: rgba(255, 255, 255, 0.65);
    padding: 5px 7px;
    border-radius: 6px;
    line-height: 1.2;
}
.admin-dash-illus__nav span.is-active {
    background: rgba(255, 107, 53, 0.2);
    color: #ffd4c4;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand);
}
.admin-dash-illus__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-dash-illus__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.admin-dash-illus__kpi {
    padding: 10px 10px 9px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.admin-dash-illus__kpi-label {
    display: block;
    font-size: 0.55rem;
    color: #64748b;
    margin-bottom: 4px;
}
.admin-dash-illus__kpi strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.admin-dash-illus__kpi--green strong { color: var(--dash-green); }
.admin-dash-illus__kpi--brand strong { color: var(--brand); }
.admin-dash-illus__kpi--blue strong { color: var(--dash-blue); }
.admin-dash-illus__kpi--green { border-top: 3px solid var(--dash-green); }
.admin-dash-illus__kpi--brand { border-top: 3px solid var(--brand); }
.admin-dash-illus__kpi--blue { border-top: 3px solid var(--dash-blue); }
.admin-dash-illus__kpi--accent strong { color: var(--admin-accent); }
.admin-dash-illus__kpi--accent { border-top: 3px solid var(--admin-accent); }
.admin-dash-illus__split {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 8px;
}
.admin-dash-illus__panel {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.admin-dash-illus__panel-title {
    font-size: 0.58rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
}
.admin-dash-illus__chart {
    flex: 1;
    min-height: 56px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}
.admin-dash-illus__chart::before {
    content: "";
    position: absolute;
    inset: auto 10px 12px 10px;
    height: 65%;
    background: linear-gradient(180deg, rgba(255, 107, 53, 0.18) 0%, transparent 72%);
    border-bottom: 2.5px solid var(--brand);
    border-radius: 0 0 4px 4px;
    clip-path: polygon(0 78%, 14% 58%, 30% 65%, 48% 38%, 65% 52%, 82% 28%, 100% 42%, 100% 100%, 0 100%);
}
.admin-dash-illus__chart::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 12px;
    height: 1px;
    background: #e8edf2;
}
.admin-dash-illus__bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: center;
}
.admin-dash-illus__bars li {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 8px;
}
.admin-dash-illus__bars span {
    font-size: 0.52rem;
    color: #64748b;
    font-weight: 500;
}
.admin-dash-illus__bars i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #f1f5f9;
    position: relative;
    font-style: normal;
}
.admin-dash-illus__bars i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand) 0%, #ff9f7a 100%);
}
.admin-dash-illus__bars--compact { gap: 6px; }
.admin-dash-illus__bars--compact li { grid-template-columns: 32px 1fr; }
.admin-dash-illus__table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 0;
}
.admin-dash-illus__table-head,
.admin-dash-illus__table-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.7fr;
    gap: 4px;
    align-items: center;
    font-size: 0.48rem;
}
.admin-dash-illus__table-head {
    color: #94a3b8;
    font-weight: 600;
    padding-bottom: 2px;
    border-bottom: 1px solid #eef2f6;
}
.admin-dash-illus__table-row span {
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-dash-illus__table-row .is-ok { color: var(--dash-green); font-weight: 600; }
.admin-dash-illus__table-row .is-warn { color: #f59e0b; font-weight: 600; }
.admin-dash-illus__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.admin-dash-illus__tabs span {
    flex: 1;
    text-align: center;
    font-size: 0.48rem;
    padding: 3px 4px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
}
.admin-dash-illus__tabs span.is-on {
    background: color-mix(in srgb, var(--admin-accent) 15%, #fff);
    color: var(--admin-accent);
    font-weight: 600;
}
.admin-dash-illus__tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1;
}
.admin-dash-illus__tiles span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    font-size: 0.5rem;
    font-weight: 600;
    color: #475569;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border: 1px solid #eef2f6;
    border-radius: 6px;
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--admin-accent) 70%, transparent);
}
.admin-dash-illus__ledger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: center;
}
.admin-dash-illus__ledger-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.5rem;
    color: #64748b;
    padding: 4px 6px;
    background: #f8fafc;
    border-radius: 4px;
}
.admin-dash-illus__ledger-row b {
    font-weight: 700;
    color: var(--admin-accent);
    font-variant-numeric: tabular-nums;
}
.admin-dash-illus__ledger-row b.is-out { color: #ef4444; }
.admin-dash-illus__form {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: center;
}
.admin-dash-illus__form li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.52rem;
    color: #475569;
    padding: 5px 8px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #eef2f6;
}
.admin-dash-illus__form i {
    width: 22px;
    height: 12px;
    border-radius: 999px;
    background: #e2e8f0;
    position: relative;
    font-style: normal;
}
.admin-dash-illus__form i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s;
}
.admin-dash-illus__form i.is-on {
    background: color-mix(in srgb, var(--admin-accent) 80%, #fff);
}
.admin-dash-illus__form i.is-on::after {
    transform: translateX(10px);
}

/* 业务管理 · 组织层级 + 档案（区别于仪表盘 KPI+图表） */
.admin-dash-illus__main--biz {
    gap: 8px;
}
.admin-dash-illus__biz {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 8px;
}
.admin-dash-illus__tree-panel,
.admin-dash-illus__detail-panel {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    padding: 10px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.admin-dash-illus__tree {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.5rem;
}
.admin-dash-illus__tree > li {
    border-radius: 6px;
    padding: 5px 6px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
}
.admin-dash-illus__tree > li.is-root {
    background: color-mix(in srgb, var(--admin-accent) 8%, #fff);
    border-color: color-mix(in srgb, var(--admin-accent) 25%, #eef2f6);
}
.admin-dash-illus__tree li > span {
    font-weight: 700;
    color: #334155;
    margin-right: 6px;
}
.admin-dash-illus__tree li > em {
    font-style: normal;
    color: #64748b;
    font-size: 0.46rem;
}
.admin-dash-illus__tree ul {
    list-style: none;
    margin: 6px 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 2px solid #e2e8f0;
}
.admin-dash-illus__tree ul li {
    padding: 4px 6px;
    border-radius: 4px;
    color: #475569;
}
.admin-dash-illus__tree ul li.is-active {
    background: color-mix(in srgb, var(--admin-accent) 12%, #fff);
    color: var(--admin-accent);
    font-weight: 600;
}
.admin-dash-illus__tree ul li em {
    float: right;
    font-style: normal;
    font-size: 0.44rem;
    color: #94a3b8;
}
.admin-dash-illus__tree ul li.is-active em { color: var(--dash-green); }
.admin-dash-illus__fields {
    margin: 0 0 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}
.admin-dash-illus__fields > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-dash-illus__fields dt {
    font-size: 0.44rem;
    color: #94a3b8;
    font-weight: 500;
}
.admin-dash-illus__fields dd {
    margin: 0;
    font-size: 0.5rem;
    font-weight: 600;
    color: #334155;
}
.admin-dash-illus__fields dd.is-ok { color: var(--dash-green); }
.admin-dash-illus__region-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}
.admin-dash-illus__region-tags > span {
    width: 100%;
    font-size: 0.44rem;
    color: #94a3b8;
    margin-bottom: 2px;
}
.admin-dash-illus__region-tags em {
    font-style: normal;
    font-size: 0.46rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--admin-accent) 10%, #fff);
    color: var(--admin-accent);
    border: 1px solid color-mix(in srgb, var(--admin-accent) 25%, #eef2f6);
}
.admin-dash-illus__map-slab {
    flex: 1;
    min-height: 36px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--admin-accent) 12%, #f1f5f9) 0%, #e8f0fe 100%);
    position: relative;
    overflow: hidden;
}
.admin-dash-illus__map-slab::before {
    content: "";
    position: absolute;
    inset: 20% 15% 25% 20%;
    border-radius: 40% 60% 50% 45%;
    background: color-mix(in srgb, var(--admin-accent) 35%, transparent);
    opacity: 0.5;
}
.admin-dash-illus__map-slab::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--admin-accent);
    top: 38%;
    left: 42%;
    box-shadow: 12px 8px 0 rgba(59, 130, 246, 0.5), -8px 14px 0 rgba(59, 130, 246, 0.35);
}
.admin-dash-illus__biz-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eef2f6;
    font-size: 0.48rem;
}
.admin-dash-illus__biz-foot > span {
    font-weight: 700;
    color: #475569;
    margin-right: 4px;
}
.admin-dash-illus__biz-foot em {
    font-style: normal;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

/* CRM · 用户列表 + 详情（区别于仪表盘） */
.admin-dash-illus__main--crm {
    gap: 8px;
}
.admin-dash-illus__crm {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 8px;
}
.admin-dash-illus__crm-list,
.admin-dash-illus__crm-detail {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    padding: 10px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.admin-dash-illus__crm-search {
    font-size: 0.48rem;
    color: #94a3b8;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e8edf2;
}
.admin-dash-illus__crm-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.admin-dash-illus__crm-filters em {
    font-style: normal;
    font-size: 0.44rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}
.admin-dash-illus__crm-filters em.is-on {
    background: color-mix(in srgb, var(--admin-accent) 15%, #fff);
    color: var(--admin-accent);
    font-weight: 600;
}
.admin-dash-illus__user-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
.admin-dash-illus__user-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
}
.admin-dash-illus__user-list li.is-active {
    background: color-mix(in srgb, var(--admin-accent) 10%, #fff);
    border-color: color-mix(in srgb, var(--admin-accent) 25%, #eef2f6);
}
.admin-dash-illus__avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.admin-dash-illus__avatar--lg {
    width: 36px;
    height: 36px;
}
.admin-dash-illus__user-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.admin-dash-illus__user-meta strong {
    font-size: 0.5rem;
    color: #334155;
    font-weight: 700;
}
.admin-dash-illus__user-meta em {
    font-style: normal;
    font-size: 0.44rem;
    color: #94a3b8;
}
.admin-dash-illus__profile-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2f6;
}
.admin-dash-illus__profile-intro {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    flex: 1;
}
.admin-dash-illus__profile-intro strong {
    font-size: 0.58rem;
    color: #1e293b;
}
.admin-dash-illus__profile-intro em {
    font-style: normal;
    font-size: 0.44rem;
    color: #94a3b8;
}
.admin-dash-illus__status-pill {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.4rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}
.admin-dash-illus__status-pill.is-ok {
    background: color-mix(in srgb, var(--dash-green) 15%, #fff);
    color: var(--dash-green);
}
.admin-dash-illus__tabs--crm {
    margin-bottom: 10px;
}
.admin-dash-illus__crm-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-content: start;
}
.admin-dash-illus__crm-grid > div {
    padding: 8px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-dash-illus__crm-grid em {
    font-style: normal;
    font-size: 0.44rem;
    color: #94a3b8;
}
.admin-dash-illus__crm-grid b {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--admin-accent);
    font-variant-numeric: tabular-nums;
}
.admin-dash-illus__crm-grid b.is-warn {
    color: #f59e0b;
}
.admin-dash-illus__crm-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eef2f6;
    font-size: 0.48rem;
}
.admin-dash-illus__crm-foot > span {
    font-weight: 700;
    color: #475569;
    margin-right: 4px;
}
.admin-dash-illus__crm-foot em {
    font-style: normal;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

/* 财务管理 · 细条指标 + 待办/分账 + 流水时间线（区别于首页 KPI+图表） */
.admin-dash-illus__main--finance {
    gap: 8px;
}
.admin-dash-illus__finance-strip {
    display: flex;
    gap: 6px;
    padding: 7px 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--admin-accent) 12%, #fff) 0%, #fff 100%);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 22%, #eef2f6);
}
.admin-dash-illus__finance-strip span {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    padding: 3px 6px;
    border-right: 1px solid #eef2f6;
}
.admin-dash-illus__finance-strip span:last-child {
    border-right: none;
}
.admin-dash-illus__finance-strip em {
    font-style: normal;
    font-size: 0.44rem;
    color: #94a3b8;
}
.admin-dash-illus__finance-strip b {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--admin-accent);
}
.admin-dash-illus__finance {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 8px;
}
.admin-dash-illus__finance-aside,
.admin-dash-illus__finance-main {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    padding: 9px 10px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.admin-dash-illus__finance-aside .admin-dash-illus__panel-title:nth-of-type(2) {
    margin-top: 6px;
    margin-bottom: 4px;
}
.admin-dash-illus__todo {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.admin-dash-illus__todo li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    font-size: 0.46rem;
}
.admin-dash-illus__todo li.is-warn {
    background: color-mix(in srgb, #f59e0b 10%, #fff);
    border-color: color-mix(in srgb, #f59e0b 28%, #eef2f6);
}
.admin-dash-illus__todo li span {
    color: #475569;
    font-weight: 500;
}
.admin-dash-illus__todo li strong {
    font-weight: 800;
    color: var(--admin-accent);
}
.admin-dash-illus__todo li em {
    font-style: normal;
    font-size: 0.4rem;
    padding: 2px 5px;
    border-radius: 4px;
    background: #fff;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.admin-dash-illus__todo li.is-warn em {
    color: #b45309;
    border-color: #fcd34d;
}
.admin-dash-illus__order-mix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    padding: 6px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #eef2f6;
}
.admin-dash-illus__order-mix > div {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 5px;
    font-size: 0.44rem;
}
.admin-dash-illus__order-mix span {
    color: #64748b;
    font-weight: 500;
}
.admin-dash-illus__order-mix i {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: #f1f5f9;
    position: relative;
    font-style: normal;
}
.admin-dash-illus__order-mix i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--admin-accent), color-mix(in srgb, var(--admin-accent) 55%, #fff));
}
.admin-dash-illus__pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    margin-bottom: 8px;
    padding: 7px 5px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed #e2e8f0;
}
.admin-dash-illus__pipeline span {
    font-size: 0.44rem;
    font-weight: 600;
    color: #475569;
    padding: 3px 5px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #eef2f6;
}
.admin-dash-illus__pipeline i {
    flex: 1;
    height: 2px;
    max-width: 10px;
    background: linear-gradient(90deg, var(--admin-accent), #fcd34d);
    border-radius: 1px;
    font-style: normal;
}
.admin-dash-illus__finance-main .admin-dash-illus__panel-title + .admin-dash-illus__panel-title {
    margin-top: 2px;
}
.admin-dash-illus__timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 7px;
    flex: 1;
    min-height: 0;
    border-left: 2px solid #e8edf2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}
.admin-dash-illus__timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 5px;
    align-items: center;
    font-size: 0.46rem;
}
.admin-dash-illus__timeline li::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--admin-accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e2e8f0;
}
.admin-dash-illus__timeline time {
    color: #94a3b8;
    font-size: 0.4rem;
}
.admin-dash-illus__timeline span {
    color: #475569;
}
.admin-dash-illus__timeline b {
    font-weight: 700;
    color: var(--dash-green);
    font-variant-numeric: tabular-nums;
}
.admin-dash-illus__timeline b.is-out {
    color: #ef4444;
}
.admin-dash-illus__finance-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 9px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eef2f6;
    font-size: 0.46rem;
}
.admin-dash-illus__finance-foot > span {
    font-weight: 700;
    color: #475569;
    margin-right: 2px;
}
.admin-dash-illus__finance-foot em {
    font-style: normal;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

/* 营销配置 · 胶囊指标 + 商品货架 + 活动卡片 */
.admin-dash-illus__main--marketing {
    gap: 8px;
}
.admin-dash-illus__mkt-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-dash-illus__mkt-chips > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 28%, #eef2f6);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.admin-dash-illus__mkt-chips b {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--admin-accent);
}
.admin-dash-illus__mkt-chips em {
    font-style: normal;
    font-size: 0.44rem;
    color: #64748b;
}
.admin-dash-illus__marketing {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 8px;
}
.admin-dash-illus__mkt-catalog,
.admin-dash-illus__mkt-campaigns {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    padding: 9px 10px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.admin-dash-illus__mkt-shelf {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.admin-dash-illus__mkt-shelf li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
}
.admin-dash-illus__mkt-thumb {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--admin-accent) 35%, #fff), #fff);
    border: 1px solid color-mix(in srgb, var(--admin-accent) 25%, #eef2f6);
}
.admin-dash-illus__mkt-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.admin-dash-illus__mkt-meta strong {
    font-size: 0.48rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.2;
}
.admin-dash-illus__mkt-meta em {
    font-style: normal;
    font-size: 0.4rem;
    color: #94a3b8;
}
.admin-dash-illus__mkt-badge {
    font-size: 0.38rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    white-space: nowrap;
}
.admin-dash-illus__mkt-badge.is-on {
    background: color-mix(in srgb, var(--admin-accent) 14%, #fff);
    color: var(--admin-accent);
}
.admin-dash-illus__mkt-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-height: 0;
}
.admin-dash-illus__mkt-cards li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
}
.admin-dash-illus__mkt-cards li.is-hot {
    background: color-mix(in srgb, var(--admin-accent) 10%, #fff);
    border-color: color-mix(in srgb, var(--admin-accent) 30%, #eef2f6);
}
.admin-dash-illus__mkt-tag {
    font-size: 0.38rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    background: #fff;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.admin-dash-illus__mkt-cards li.is-hot .admin-dash-illus__mkt-tag {
    color: var(--admin-accent);
    border-color: color-mix(in srgb, var(--admin-accent) 35%, #e2e8f0);
}
.admin-dash-illus__mkt-cards strong {
    font-size: 0.48rem;
    font-weight: 700;
    color: #334155;
}
.admin-dash-illus__mkt-cards em {
    font-style: normal;
    font-size: 0.4rem;
    color: #94a3b8;
}
.admin-dash-illus__mkt-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 9px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eef2f6;
    font-size: 0.46rem;
}
.admin-dash-illus__mkt-foot > span {
    font-weight: 700;
    color: #475569;
    margin-right: 2px;
}
.admin-dash-illus__mkt-foot em {
    font-style: normal;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

/* 系统设置 · 顶栏 Tab + 角色列表 + 接入/日志 */
.admin-dash-illus__main--system {
    gap: 8px;
}
.admin-dash-illus__sys-tabs {
    margin-bottom: 0;
}
.admin-dash-illus__sys {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 8px;
}
.admin-dash-illus__sys-roles,
.admin-dash-illus__sys-detail {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    padding: 9px 10px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.admin-dash-illus__sys-role-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.admin-dash-illus__sys-role-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 7px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    font-size: 0.48rem;
}
.admin-dash-illus__sys-role-list li.is-active {
    background: color-mix(in srgb, var(--admin-accent) 10%, #fff);
    border-color: color-mix(in srgb, var(--admin-accent) 28%, #eef2f6);
    box-shadow: inset 3px 0 0 var(--admin-accent);
}
.admin-dash-illus__sys-role-list li span {
    color: #334155;
    font-weight: 600;
}
.admin-dash-illus__sys-role-list li em {
    font-style: normal;
    font-size: 0.4rem;
    color: #94a3b8;
}
.admin-dash-illus__sys-detail .admin-dash-illus__panel-title + .admin-dash-illus__panel-title {
    margin-top: 6px;
}
.admin-dash-illus__sys-connect {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-dash-illus__sys-connect li {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    font-size: 0.46rem;
}
.admin-dash-illus__sys-connect li i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    font-style: normal;
}
.admin-dash-illus__sys-connect li i.is-on {
    background: var(--dash-green);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dash-green) 25%, #fff);
}
.admin-dash-illus__sys-connect li span {
    color: #475569;
    font-weight: 500;
}
.admin-dash-illus__sys-connect li em {
    font-style: normal;
    font-size: 0.4rem;
    color: #64748b;
}
.admin-dash-illus__sys-log {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
.admin-dash-illus__sys-log li {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 5px;
    align-items: center;
    padding: 5px 7px;
    border-radius: 6px;
    background: #fafbfc;
    border: 1px solid #f1f5f9;
    font-size: 0.44rem;
}
.admin-dash-illus__sys-log time {
    color: #94a3b8;
    font-size: 0.4rem;
}
.admin-dash-illus__sys-log span {
    color: #475569;
}
.admin-dash-illus__sys-log em {
    font-style: normal;
    color: #64748b;
    font-size: 0.4rem;
}
.admin-dash-illus__sys-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 9px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eef2f6;
    font-size: 0.46rem;
}
.admin-dash-illus__sys-foot > span {
    font-weight: 700;
    color: #475569;
    margin-right: 2px;
}
.admin-dash-illus__sys-foot em {
    font-style: normal;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

.admin-ui-preview__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #e8ecf1;
    border-bottom: 1px solid var(--line);
}
.admin-ui-preview__chrome span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}
.admin-ui-preview__chrome span:first-child { background: #f87171; }
.admin-ui-preview__chrome span:nth-child(2) { background: #fbbf24; }
.admin-ui-preview__chrome span:nth-child(3) { background: #4ade80; }
.admin-ui-preview__body {
    display: flex;
    height: calc(100% - 33px);
    min-height: 0;
}
.admin-ui-preview__side {
    flex: 0 0 26%;
    background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-ui-preview__main {
    flex: 1;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.admin-ui-preview__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.admin-ui-preview__metrics span {
    height: 36px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: inset 3px 0 0 var(--admin-accent);
}
.admin-ui-preview__chart {
    flex: 1;
    min-height: 48px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.admin-ui-preview__chart::after {
    content: "";
    position: absolute;
    inset: auto 12px 12px 12px;
    height: 55%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--admin-accent) 35%, transparent) 40%, transparent);
    border-bottom: 2px solid var(--admin-accent);
    border-radius: 0 0 4px 4px;
    clip-path: polygon(0 80%, 18% 45%, 38% 60%, 58% 25%, 78% 50%, 100% 15%, 100% 100%, 0 100%);
}
.admin-ui-preview__table,
.admin-ui-preview__ledger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.admin-ui-preview__table span,
.admin-ui-preview__ledger span {
    height: 14px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--line);
}
.admin-ui-preview__table span:first-child,
.admin-ui-preview__ledger span:first-child {
    height: 22px;
    background: color-mix(in srgb, var(--admin-accent) 12%, #fff);
    border-color: color-mix(in srgb, var(--admin-accent) 30%, var(--line));
}
.admin-ui-preview__profile {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--admin-accent) 25%, #e2e8f0);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.admin-ui-preview__tabs {
    display: flex;
    gap: 6px;
}
.admin-ui-preview__tabs span {
    flex: 1;
    height: 10px;
    border-radius: 4px;
    background: #e2e8f0;
}
.admin-ui-preview__tabs span:first-child {
    background: var(--admin-accent);
    opacity: 0.85;
}
.admin-ui-preview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
}
.admin-ui-preview__grid span {
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    min-height: 36px;
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--admin-accent) 70%, transparent);
}
.admin-ui-preview__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    justify-content: center;
}
.admin-ui-preview__form span {
    height: 12px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--line);
}
.admin-ui-preview__form span:nth-child(odd) { width: 72%; }
.admin-ui-preview__form span:last-child {
    width: 40%;
    height: 20px;
    margin-top: 4px;
    background: var(--admin-accent);
    border: none;
    opacity: 0.9;
}
.feat-deliver {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.feat-deliver__item {
    padding: 20px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.feat-deliver__item strong {
    display: block;
    font-size: 0.92rem;
    color: var(--ink);
    margin-bottom: 6px;
}
.feat-deliver__item p {
    font-size: 0.8rem;
    color: var(--ink-3);
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1024px) {
    .hero-grid, .lead-grid, .split, .demo-showcase__grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
    .adv-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-card--featured { grid-column: span 2; }
    .about-certs,
    .about-services { grid-template-columns: 1fr; }
    .about-intro--split {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .about-intro__copy {
        padding: 0;
    }
    .about-intro__visual {
        justify-self: center;
        margin-inline: auto;
        max-width: 100%;
    }
    .about-enterprise-illus {
        min-height: 200px;
    }
    .about-enterprise-illus__img {
        min-height: 180px;
        max-height: 240px;
    }
    .about-contact__panel { grid-template-columns: 1fr; }
    .about-contact__panel-side {
        border-left: none;
        border-top: 1px solid rgba(255, 107, 74, 0.1);
    }
    .about-contact__meta { grid-template-columns: 1fr; }
    .adv-tech { grid-template-columns: 1fr; }
    .adv-service { grid-template-columns: repeat(2, 1fr); }
    .adv-trust__list { grid-template-columns: repeat(2, 1fr); }
    .feat-split,
    .feat-split--reverse {
        flex-direction: column;
        max-width: none;
    }
    .split .feat-admin-visual { max-width: 480px; margin-inline: auto; }
    .feat-split .feat-copy {
        flex: 1 1 auto;
        max-width: 34rem;
    }
    .feat-visual {
        order: -1;
        margin-inline: auto;
        max-width: 360px;
    }
    .feat-pay-grid { grid-template-columns: 1fr; }
    .feat-account__grid { grid-template-columns: 1fr; }
    .feat-deliver { grid-template-columns: repeat(2, 1fr); }
    .admin-module-row,
    .admin-module-row--reverse {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .admin-module-row--reverse .admin-module-row__visual,
    .admin-module-row--reverse .admin-module-row__copy { order: unset; }
    .admin-module-row__visual { max-width: 520px; margin-inline: auto; width: 100%; }
    .admin-dash-illus__frame { flex-direction: column; }
    .admin-dash-illus__nav {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .admin-dash-illus__kpis { grid-template-columns: 1fr; }
    .admin-dash-illus__split { grid-template-columns: 1fr; }
    .admin-dash-illus__biz { grid-template-columns: 1fr; }
    .admin-dash-illus__crm { grid-template-columns: 1fr; }
    .admin-dash-illus__finance { grid-template-columns: 1fr; }
    .admin-dash-illus__finance-strip { flex-direction: column; }
    .admin-dash-illus__marketing { grid-template-columns: 1fr; }
    .admin-dash-illus__sys { grid-template-columns: 1fr; }
    .admin-dash-illus__fields { grid-template-columns: 1fr; }
    .admin-dash-illus__crm-grid { grid-template-columns: 1fr; }
    .cap-grid { grid-template-columns: repeat(3, 1fr); }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .scenario-grid, .tech-row, .steps { grid-template-columns: 1fr 1fr; }
    .hero-device { order: -1; }
    .device-float { display: none; }
    .demo-showcase__grid { min-height: 0; }
    .demo-nav {
        flex-direction: column;
        padding: 14px;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .demo-nav__label { margin-bottom: 10px; }
    .demo-nav__list {
       /* flex-direction: row;*/
        flex-wrap: nowrap;
        overflow-x: auto;
        flex: none;
        gap: 8px;
        padding-bottom: 4px;
    }
    .demo-nav__item {
        flex: 0 0 auto;
        min-width: 148px;
        min-height: 0;
    }
    .demo-nav__item.is-active { box-shadow: inset 0 -3px 0 var(--brand); }
    .demo-nav__aside {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 12px;
        padding-top: 12px;
    }
    .demo-nav__stats {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 16px;
        margin-bottom: 0;
    }
    .demo-viewport { order: -1; padding: 24px 16px 20px; }
    .device--showcase { width: min(280px, 78vw); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    body.has-sticky-cta { padding-bottom: 64px; }
    .nav-links, .nav-inner > .nav-cta { display: none; }
    .menu-btn { display: grid; place-items: center; }
    .nav.is-open .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: var(--nav-h);
        left: 0;
        right: 0;
        padding: 12px 16px 16px;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }
    .cap-grid { grid-template-columns: repeat(2, 1fr); }
    .metrics-grid, .scenario-grid, .steps { grid-template-columns: 1fr; }
    .hero-points { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .sticky-cta { display: flex; }
    .float-consult { bottom: 76px; }
    .footer-grid { grid-template-columns: 1fr; }
    .demo-nav__item { min-width: 128px; padding: 10px 12px; }
    .demo-nav__icon { width: 36px; height: 36px; font-size: 1rem; }
    .demo-nav__aside { flex-direction: column; align-items: flex-start; }
    .demo-viewport { min-height: 400px; }
    .arch-diagram { padding: 16px 12px; margin-bottom: 28px; }
    .arch-diagram-svg svg { min-width: 520px; }
    .page-hero__stats { flex-direction: column; align-items: center; gap: 6px; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
    .pricing-ops { grid-template-columns: 1fr; }
    .adv-grid,
    .adv-audience,
    .adv-service { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: 1fr; }
    .news-card--featured { grid-column: auto; }
    .adv-trust__list { grid-template-columns: 1fr; }
    .feat-deliver { grid-template-columns: 1fr; }
}