:root {
  --bg: #090d10;
  --bg-soft: #0f151a;
  --panel: #12181d;
  --panel-soft: #151d23;
  --text: #f4e7cb;
  --muted: #d5c7af;
  --line: rgba(255,255,255,0.1);
  --accent: #d59c5f;
  --accent-strong: #c96a2c;
  --shadow: 0 24px 72px rgba(0,0,0,.38);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(205,125,54,.1), transparent 18%),
    radial-gradient(circle at 85% 5%, rgba(215,167,104,.08), transparent 14%),
    linear-gradient(180deg, rgba(12,16,20,1), rgba(8,11,14,1));
  color: var(--text);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 85%);
}
img, video { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
h1, h2, h3, h4, h5, h6, .logo-title, .section-kicker, .footer-title, .expert-badge {
  font-family: "ZCOOL QingKe HuangYou", "Noto Serif SC", serif;
  font-weight: 400;
}
.container { width: min(1320px, calc(100% - 2rem)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: rgba(13,17,20,.82); backdrop-filter: blur(18px); }
.header-top { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1rem 0 .5rem; }
.logo-lockup { display: inline-flex; align-items: center; gap: .8rem; }
.logo-img { width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: #0f1619; padding: .25rem; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.logo-title { font-size: 1.55rem; letter-spacing: .18em; }
.logo-sub { margin-top: .35rem; font-size: .68rem; letter-spacing: .38em; text-transform: uppercase; color: var(--accent); }
.main-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.nav-link { font-size: .92rem; letter-spacing: .18em; color: #f2e1bf; }
.nav-link.is-active, .nav-link:hover { color: #fff; }
.header-search-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: .4rem 0 1rem; }
.search-panel { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(26,32,37,.92), rgba(14,18,22,.88)); padding: .75rem 1rem; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.search-panel input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); outline: none; }
.search-panel button, .button-primary, .share-btn { border: 0; background: var(--accent-strong); color: #fff9ef; padding: .78rem 1.1rem; cursor: pointer; }
.search-icon { font-size: .82rem; letter-spacing: .18em; color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(213,156,95,.24); background: rgba(205,128,62,.08); color: #f2d2a4; padding: .45rem .75rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.chip:hover { border-color: rgba(213,156,95,.52); transform: translateY(-1px); background: rgba(213,156,95,.14); }
.hero-shell { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(11,14,18,.98), rgba(11,14,18,.76)); }
.noise-cloud { position: absolute; inset: 0; overflow: hidden; opacity: .03; pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 2rem; align-items: end; padding: 3rem 0 4.3rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: #d6b382; }
.crumb-sep { opacity: .6; }
.hero-eyebrow, .section-kicker { font-size: .72rem; letter-spacing: .36em; text-transform: uppercase; color: var(--accent); }
.hero-copy h1 { margin: 1rem 0 1.2rem; font-size: clamp(2.8rem, 6vw, 5rem); line-height: .96; }
.hero-copy h1 span { display: block; margin-top: 1rem; font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.hero-text, .section-lead, .section-heading p, .panel-card p, .contact-card p, .site-footer p { color: var(--muted); line-height: 1.95; }
.hero-note-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 1.2rem; }
.hero-note, .policy-line { display: flex; align-items: flex-start; gap: .8rem; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(20,25,29,.94), rgba(15,19,24,.76)); padding: 1rem 1.05rem; color: #dcccb2; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.3rem; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.5rem; letter-spacing: .14em; text-transform: uppercase; }
.button-secondary { border: 1px solid rgba(213,156,95,.4); background: transparent; color: #f6e4c2; }
.hero-frame { position: relative; overflow: hidden; min-height: 34rem; border: 1px solid var(--line); background: #0c1014; box-shadow: var(--shadow); clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 96%); }
.slim-frame { min-height: 30rem; }
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,13,16,.08), rgba(10,13,16,.52) 55%, rgba(10,13,16,.88)); }
.hero-stats { position: absolute; inset-inline: 1.5rem; bottom: 1.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat-plate { border: 1px solid rgba(255,255,255,.1); background: rgba(10,14,18,.72); padding: 1rem; backdrop-filter: blur(10px); }
.stat-plate span { display: block; font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; color: #d2b180; }
.stat-plate strong { display: block; margin-top: .55rem; font-size: 1.35rem; color: #fff5e2; }
.floating-card { position: absolute; top: 1.5rem; left: 1.5rem; max-width: 19rem; border-radius: 1.5rem; border: 1px solid rgba(226,189,136,.25); background: rgba(18,23,27,.78); padding: 1.2rem; backdrop-filter: blur(12px); }
.floating-card span { display: block; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); }
.floating-card strong { display: block; margin-top: .8rem; font-size: 1.7rem; font-family: "ZCOOL QingKe HuangYou", "Noto Serif SC", serif; }
.section-wrap { position: relative; padding: 5.6rem 0; }
.section-dark { border-block: 1px solid var(--line); background: #0d1217; }
.section-black { border-block: 1px solid var(--line); background: #0b0f13; }
.section-heading { display: grid; grid-template-columns: .72fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.section-heading h2, .split-grid h2 { margin: .75rem 0 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; }
.grid-three, .grid-two, .grid-four, .grid-five, .grid-video { display: grid; gap: 1.35rem; }
.grid-three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-four { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 1.4rem; }
.grid-five { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid-video { grid-template-columns: repeat(3, minmax(0,1fr)); }
.panel-card, .contact-card, .faq-item, .share-card, .timeline-card, .ad-slot { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(18,23,29,.95), rgba(11,15,19,.85)); box-shadow: 0 18px 55px rgba(0,0,0,.28); padding: 1.4rem; }
.media-card h3, .panel-card h3, .contact-card h3, .timeline-item h3, .ad-slot h3 { margin: .7rem 0 .5rem; font-size: 1.7rem; }
.panel-foot, .expert-role { margin-top: .75rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: #f7d49f; }
.video-card { overflow: hidden; border-radius: 2rem; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.video-card:hover { transform: translateY(-6px); border-color: rgba(213,156,95,.34); box-shadow: 0 30px 78px rgba(0,0,0,.48); }
.video-thumb { position: relative; height: 17rem; overflow: hidden; background: #0c1014; }
.video-surface { height: 100%; object-fit: cover; filter: saturate(.95); transform: scale(1); transition: transform .7s ease, filter .3s ease; pointer-events: none; }
.video-card:hover .video-surface { transform: scale(1.05); filter: saturate(1.08); }
.video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,12,15,.12), rgba(9,12,15,.2) 35%, rgba(9,12,15,.7)), radial-gradient(circle at center, transparent 0 22%, rgba(0,0,0,.48) 76%); }
.video-ribbon, .video-preview-note { position: absolute; z-index: 3; font-size: .62rem; text-transform: uppercase; }
.video-ribbon { top: 1.25rem; right: 1.25rem; display: inline-flex; align-items: center; border-radius: 9999px; background: rgba(10,13,16,.78); padding: .42rem .8rem; color: #f3d2a0; letter-spacing: .22em; backdrop-filter: blur(12px); }
.video-preview-note { top: 1.25rem; left: 1.25rem; color: #f7deba; letter-spacing: .28em; }
.play-orb { position: absolute; left: 50%; top: 50%; z-index: 2; width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 9999px; border: 1px solid rgba(255,255,255,.18); background: rgba(12,15,18,.66); color: #f7d6a7; transform: translate(-50%, -50%) scale(.92); transition: transform .28s ease, background .28s ease; backdrop-filter: blur(10px); }
.video-card:hover .play-orb { transform: translate(-50%, -50%) scale(1); background: rgba(201,106,44,.78); }
.video-body { padding: 1.4rem; }
.video-meta-rail { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: .9rem; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #d6b382; }
.video-meta-rail span { border: 1px solid rgba(255,255,255,.08); background: rgba(15,19,23,.72); padding: .45rem .65rem; }
.video-body h3 { margin: 0 0 .55rem; font-size: 1.8rem; }
.video-sub { margin-top: 0; color: #d9ccb5; }
.video-notes { display: grid; gap: .55rem; margin: 1rem 0; border: 1px solid rgba(255,255,255,.08); background: #0e1317; padding: 1rem; border-radius: 1.2rem; }
.video-stats { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0,1fr)); padding-top: 1rem; border-top: 1px solid var(--line); }
.video-stats span { display: block; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: #a99374; }
.video-stats strong { display: block; margin-top: .35rem; }
.video-priority { margin-top: 1rem; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: #f2c789; }
.split-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 1.35rem; align-items: start; }
.trust-grid { margin-top: 1.2rem; }
.stack-gap { display: grid; gap: 1rem; }
.timeline-item { padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1rem; }
.timeline-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.timeline-item span { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: #f6d29e; }
.policy-line { line-height: 1.9; }
.ad-slot-box { display: grid; min-height: 9rem; place-items: center; border: 1px dashed rgba(213,156,95,.45); background: linear-gradient(135deg, rgba(19,24,29,.88), rgba(11,15,19,.78)); color: #f7dfbb; letter-spacing: .18em; text-transform: uppercase; text-align: center; padding: 1rem; }
.partner-tile { display: flex; min-height: 7rem; align-items: center; justify-content: center; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(17,22,27,.95), rgba(13,17,22,.84)); padding: 1rem; text-align: center; color: #f2dcc1; letter-spacing: .12em; text-transform: uppercase; }
.faq-item summary { list-style: none; cursor: pointer; font-size: 1.45rem; }
.faq-item p { margin-bottom: 0; }
.step-index { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid rgba(213,156,95,.3); background: #171d22; color: #f4cf9b; font-size: .72rem; letter-spacing: .2em; }
.contact-card h3 { margin-top: 0; }
.grid-three.qr-grid { align-items: stretch; }
.qr-card { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(18,23,29,.95), rgba(10,14,18,.86)); padding: 1rem; }
.qr-card img { aspect-ratio: 1/1; background: #f6e6c8; padding: .8rem; }
.json-card pre { overflow: auto; white-space: pre-wrap; word-break: break-word; border-radius: 1rem; background: #0b0f13; padding: 1rem; color: #d2c0a1; font-size: .82rem; line-height: 1.8; }
.share-buttons { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.share-line { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.share-line:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.site-footer { border-top: 1px solid var(--line); background: #090d10; padding: 2.8rem 0; }
.footer-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 1.5rem; }
.footer-title { font-size: 1.8rem; color: #fff4e1; }
.footer-meta { color: #bda789; line-height: 1.9; }
.toast-root { position: fixed; top: 1rem; right: 1rem; z-index: 90; display: grid; gap: .5rem; }
.toast { background: rgba(16,21,26,.92); color: #fff2dd; border: 1px solid rgba(213,156,95,.25); padding: .9rem 1rem; box-shadow: 0 12px 30px rgba(0,0,0,.35); max-width: 18rem; }
@media (max-width: 1100px) {
  .hero-grid, .split-grid, .section-heading, .footer-grid, .header-search-row { grid-template-columns: 1fr; }
  .grid-three, .grid-four, .grid-five, .grid-video, .grid-two, .hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .main-nav { display: none; }
}
@media (max-width: 760px) {
  .container { width: min(100% - 1.25rem, 100%); }
  .section-wrap { padding: 4.4rem 0; }
  .hero-frame { min-height: 24rem; clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%); }
  .grid-three, .grid-four, .grid-five, .grid-video, .grid-two, .hero-note-grid, .hero-stats { grid-template-columns: 1fr; }
  .video-thumb { height: 14rem; }
  .video-ribbon, .video-preview-note, .video-meta-rail { letter-spacing: .14em; }
  .ad-slot-box { min-height: 7rem; letter-spacing: .12em; }
  .search-panel { flex-wrap: wrap; }
  .search-panel button { width: 100%; }
}