:root {
    --blue: #00d9ff;
    --pink: #ff2bd6;
    --orange: #ffb000;
    --green: #b7ff00;
    --black: #050509;
    --white: #ffffff;
    --muted: #c9d5ff;
    --panel: rgba(9, 10, 25, .78);
    --line: rgba(255, 255, 255, .15);
    --radius: 28px;
    --shadow: 0 24px 70px rgba(255, 43, 214, .22), 0 0 80px rgba(0, 217, 255, .18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--white);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 43, 214, .34), transparent 26rem),
        radial-gradient(circle at 82% 12%, rgba(0, 217, 255, .32), transparent 28rem),
        radial-gradient(circle at 52% 82%, rgba(183, 255, 0, .18), transparent 26rem),
        linear-gradient(135deg, #050509 0%, #10112c 43%, #050509 100%);
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.7;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
body::before, body::after {
    content: "";
    position: fixed;
    inset: auto;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    filter: blur(8px);
    animation: floatGlow 9s linear infinite;
}
body::before { width: 160px; height: 160px; left: 6vw; top: 18vh; background: rgba(255, 176, 0, .36); }
body::after { width: 120px; height: 120px; right: 9vw; bottom: 14vh; background: rgba(183, 255, 0, .28); animation-duration: 12s; }
@keyframes floatGlow { 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(24px,-32px,0) scale(1.14);} }
.site-header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); background: rgba(5, 5, 9, .78); border-bottom: 1px solid var(--line); }
.top-nav { max-width: 1220px; margin: 0 auto; padding: 16px 20px 10px; display: flex; align-items: center; gap: 20px; }
.brand-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 1000; letter-spacing: -1px; position: relative; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; color: #050509; background: linear-gradient(135deg, var(--green), var(--orange)); box-shadow: 0 0 22px rgba(183,255,0,.54); transform: rotate(-7deg); }
.brand-word { font-size: clamp(22px, 3vw, 34px); background: linear-gradient(90deg, var(--blue), var(--pink), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 22px rgba(0, 217, 255, .28); }
.brand-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 8px rgba(255,43,214,.12), 0 0 26px var(--pink); }
.nav-toggle { display: none; margin-left: auto; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--white); border-radius: 14px; padding: 9px 12px; font-size: 20px; }
.nav-links { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.nav-links a { padding: 10px 12px; border: 1px solid transparent; border-radius: 999px; color: #ecf2ff; font-weight: 800; font-size: 14px; }
.nav-links a:hover { border-color: rgba(0,217,255,.62); background: rgba(0,217,255,.13); box-shadow: 0 0 26px rgba(0,217,255,.16); }
.search-strip { max-width: 1220px; margin: 0 auto; padding: 0 20px 14px; }
.fake-search { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); padding: 7px; box-shadow: inset 0 0 30px rgba(0,217,255,.08); }
.search-icon { padding-left: 16px; font-size: 22px; }
.fake-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--white); font-size: 15px; }
.fake-search input::placeholder { color: rgba(255,255,255,.68); }
.fake-search button, .cta, .ghost-btn { border: 0; cursor: pointer; border-radius: 999px; padding: 12px 18px; font-weight: 1000; color: #050509; background: linear-gradient(135deg, var(--green), var(--orange)); box-shadow: 0 12px 28px rgba(255,176,0,.24); }
.search-feedback { margin: 8px 0 0 18px; color: var(--muted); font-size: 13px; min-height: 20px; }
main { max-width: 1220px; margin: 0 auto; padding: 32px 20px 70px; }
.hero { min-height: 72vh; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr); gap: 26px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(183,255,0,.38); border-radius: 999px; color: var(--green); background: rgba(183,255,0,.08); font-weight: 900; }
h1, h2, h3 { line-height: 1.12; margin: 0; }
h1 { margin-top: 18px; font-size: clamp(42px, 7vw, 92px); letter-spacing: -4px; }
.gradient-text { background: linear-gradient(90deg, var(--blue), var(--pink), var(--orange), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 720px; color: #e8edff; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ghost-btn { color: var(--white); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); box-shadow: none; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.stat { padding: 16px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.stat strong { display: block; color: var(--green); font-size: 26px; }
.hero-visual { position: relative; min-height: 560px; }
.hero-poster { border-radius: 38px; overflow: hidden; border: 2px solid rgba(255,255,255,.16); box-shadow: var(--shadow); transform: rotate(2deg); }
.hero-poster img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.float-card { position: absolute; left: -16px; bottom: 36px; width: min(350px, 86%); transform: rotate(-4deg); }
.section { margin-top: 74px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.section-title { font-size: clamp(30px, 5vw, 56px); letter-spacing: -2px; }
.section-subtitle { color: #dfe6ff; max-width: 680px; margin: 10px 0 0; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card, .video-card, .topic-card, .review-card, .faq-item, .profile-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); background: var(--panel); box-shadow: 0 16px 50px rgba(0,0,0,.24); }
.card { padding: 24px; }
.card::before, .video-card::before, .topic-card::before, .review-card::before, .profile-card::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(135deg, rgba(0,217,255,.26), rgba(255,43,214,.18), rgba(255,176,0,.20)); opacity: .22; z-index: -1; }
.video-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.video-card:hover { transform: translateY(-10px) rotate(-1deg); border-color: rgba(183,255,0,.74); box-shadow: 0 24px 80px rgba(255,43,214,.30), 0 0 55px rgba(0,217,255,.25); }
.video-frame { position: relative; aspect-ratio: 16 / 10; background: #111; overflow: hidden; border-bottom: 1px solid var(--line); }
.video-frame video, .video-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.24) contrast(1.1); }
.play-button { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(.84); width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #050509; background: linear-gradient(135deg, var(--green), var(--orange)); opacity: 0; box-shadow: 0 0 0 12px rgba(255,255,255,.12), 0 0 45px var(--pink); transition: opacity .25s ease, transform .25s ease; font-size: 28px; font-weight: 1000; }
.video-card:hover .play-button { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: jumpColor .8s ease infinite alternate; }
@keyframes jumpColor { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(95deg); } }
.video-body { padding: 18px; }
.video-body h3 { font-size: 20px; }
.video-body p { color: #dce4ff; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag { font-size: 12px; font-weight: 900; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 9px; color: var(--green); background: rgba(183,255,0,.08); }
.metrics { display: flex; flex-wrap: wrap; gap: 11px; color: #f7fbff; font-size: 13px; margin-top: 14px; }
.topic-card, .review-card, .profile-card { padding: 22px; }
.topic-card strong { color: var(--orange); }
.barrage { min-height: 170px; position: relative; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(0,217,255,.12), rgba(255,43,214,.10)); overflow: hidden; }
.barrage span { position: absolute; white-space: nowrap; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); animation: flyText 11s linear infinite; }
.barrage span:nth-child(1){ top: 22px; left: -10%; animation-delay: 0s; }
.barrage span:nth-child(2){ top: 76px; left: -35%; animation-delay: 2s; }
.barrage span:nth-child(3){ top: 124px; left: -22%; animation-delay: 4s; }
@keyframes flyText { from { transform: translateX(-10vw); } to { transform: translateX(95vw); } }
.ai-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; align-items: stretch; }
.ai-shot { border-radius: var(--radius); overflow: hidden; min-height: 100%; border: 1px solid var(--line); }
.ai-shot img { width: 100%; height: 100%; object-fit: cover; }
.step-list { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step-list li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); }
.step-list li::before { content: counter(step); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #050509; background: var(--green); font-weight: 1000; }
.partner-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.partner-wall span { min-height: 74px; display: grid; place-items: center; border-radius: 20px; border: 1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.07); font-weight: 1000; color: #eef4ff; }
.faq-list { display: grid; gap: 12px; }
.faq-item { padding: 0; }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 20px; font-weight: 1000; color: var(--green); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin: 0; padding: 0 20px 20px; color: #dce4ff; }
.contact-panel { display: grid; grid-template-columns: 1fr .7fr; gap: 18px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact-list li { padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.qr-row { display: flex; gap: 12px; flex-wrap: wrap; }
.qr-box { width: 108px; aspect-ratio: 1; border-radius: 20px; display: grid; place-items: center; color: #050509; background: conic-gradient(from 90deg, var(--blue), var(--pink), var(--orange), var(--green), var(--blue)); font-weight: 1000; padding: 10px; }
.qr-box span { width: 100%; height: 100%; border-radius: 14px; background: rgba(255,255,255,.86); display: grid; place-items: center; }
.breadcrumb { margin: 10px 0 26px; color: var(--muted); font-size: 14px; }
.breadcrumb a { color: var(--green); }
.page-hero { padding: 46px; border-radius: 36px; background: linear-gradient(135deg, rgba(0,217,255,.16), rgba(255,43,214,.16)); border: 1px solid var(--line); overflow: hidden; position: relative; }
.page-hero::after { content: "51爆料"; position: absolute; right: -24px; bottom: -42px; font-size: 120px; font-weight: 1000; color: rgba(255,255,255,.05); letter-spacing: -8px; }
.page-hero p { max-width: 760px; color: #e8edff; font-size: 18px; }
.content-block { margin-top: 24px; }
.site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: rgba(0,0,0,.56); padding: 52px 20px 24px; }
.footer-grid { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr .9fr .7fr; gap: 24px; }
.footer-grid p, .footer-list { color: #d9e2ff; }
.footer-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer-bottom { max-width: 1220px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; color: #d9e2ff; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row a { padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
@media (max-width: 980px) {
    .hero, .ai-panel, .contact-panel { grid-template-columns: 1fr; }
    .hero-visual { min-height: auto; }
    .float-card { position: relative; left: 0; bottom: 0; width: 100%; margin-top: 16px; transform: none; }
    .grid-3, .grid-4, .footer-grid, .partner-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .top-nav { align-items: flex-start; }
    .nav-toggle { display: block; }
    .nav-links { display: none; flex-basis: 100%; width: 100%; order: 3; margin-left: 0; padding-top: 10px; }
    .nav-links.is-open { display: grid; grid-template-columns: 1fr 1fr; }
    .fake-search { grid-template-columns: auto 1fr; border-radius: 24px; }
    .fake-search button { grid-column: 1 / -1; }
    h1 { letter-spacing: -2px; }
    .stat-row, .grid-2, .grid-3, .grid-4, .footer-grid, .partner-wall { grid-template-columns: 1fr; }
    .section-head { display: block; }
    .page-hero { padding: 28px; }
}