:root {
  --background: #05080a;
  --surface: rgba(11, 20, 22, 0.92);
  --border: rgba(135, 255, 220, 0.14);
  --text: #f4f1e8;
  --muted: #b8c2c0;
  --accent: #ff7b3c;
  --signal: #85ffd5;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  --radius-lg: 28px;
  --radius-md: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at top left, rgba(133, 255, 213, 0.09), transparent 28%),
    radial-gradient(circle at right center, rgba(255, 123, 60, 0.12), transparent 24%),
    linear-gradient(180deg, #040709 0%, #081013 56%, #05080a 100%);
  color: var(--text);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.page-shell { width: min(1440px, calc(100% - 24px)); margin: 0 auto; padding: 20px 0 44px; }
.topbar, .surface, .footer-shell {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(17, 24, 25, 0.92), rgba(7, 12, 13, 0.9));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.topbar {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 30px;
  position: sticky;
  top: 12px;
  z-index: 20;
  margin-bottom: 22px;
}
.brand-mark { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark img, .footer-brand img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
}
.brand-name, h1, h2, h3 {
  font-family: "Noto Serif SC", serif;
  margin: 0;
  line-height: 1.1;
}
.brand-name { font-size: 1.52rem; font-weight: 700; letter-spacing: 0.03em; }
.brand-subline, .hero-body, .panel p, .column-card p, .review-card p, .faq-list p, .search-note, .contact-card p, .image-panel-copy p, .community-copy, .footer-brand p:last-child {
  color: var(--muted);
}
.topnav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.topnav a, .share-list a {
  padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(133,255,213,0.18); background: rgba(133,255,213,0.05);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.topnav a:hover, .share-list a:hover, .primary-link:hover, .ghost-link:hover, .search-form button:hover, .play-button:hover {
  transform: translateY(-2px); border-color: rgba(255,123,60,0.6); background: rgba(255,123,60,0.12);
}
.main-layout { display: flex; flex-direction: column; gap: 22px; }
.grid-two, .hero-grid, .search-strip, .breadcrumb-strip, .footer-shell { display: grid; gap: 22px; }
.hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
.surface, .footer-shell { border-radius: var(--radius-lg); padding: 22px; }
.hero-copy { padding: 32px; }
h1 { font-size: clamp(2.55rem, 4vw, 4.5rem); max-width: 10ch; }
.eyebrow, .tagline, .video-chip, .duration-chip, .column-subtitle, .update-chip, .search-note, .hero-stats dt, .contact-list dt {
  letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--signal);
}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0; }
.primary-link, .ghost-link, .search-form button {
  display:inline-flex; align-items:center; gap:8px; padding:13px 18px; border-radius:999px; border:1px solid rgba(255,123,60,.38);
  transition:all .25s ease;
}
.primary-link, .search-form button { background: linear-gradient(135deg, rgba(255,123,60,.18), rgba(255,123,60,.08)); }
.ghost-link { background: rgba(133,255,213,.06); }
.hero-stats, .contact-list { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin:0; }
.hero-stats div, .contact-list div, .metric-list div, .column-card, .review-card, .faq-list details, .qr-card, .video-card, .aside-stat, .contact-card, .share-card, .search-strip, .breadcrumb-strip, .panel-highlight {
  border:1px solid rgba(133,255,213,.12); background:linear-gradient(180deg, rgba(133,255,213,.05), rgba(255,255,255,.02));
}
.hero-stats div, .contact-list div, .metric-list div, .column-card, .review-card, .faq-list details, .qr-card { border-radius: var(--radius-md); padding: 16px; }
.hero-stats dd, .contact-list dd { margin:8px 0 0; font-size:1.2rem; font-weight:700; }
.hero-visual {
  min-height: 560px; position: relative; overflow: hidden; background-size: cover; background-position:center;
}
.hero-glass {
  min-height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:18px; padding:30px;
  background: linear-gradient(180deg, rgba(3,5,6,.05), rgba(3,5,6,.75));
}
.ticker-track, .chip-row, .keyword-wall, .share-list { display:flex; flex-wrap:wrap; gap:10px; }
.ticker-track span, .chip-row span, .keyword-wall span {
  padding:9px 12px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.search-strip, .breadcrumb-strip { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items:center; }
.search-form { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.search-input-wrap {
  display:flex; align-items:center; gap:12px; flex:1; min-width:260px; border:1px solid rgba(133,255,213,.15); border-radius:999px; padding:0 16px; background:rgba(255,255,255,.03);
}
.search-input-wrap input { width:100%; border:0; outline:none; background:transparent; color:var(--text); padding:14px 0; }
.breadcrumb-line { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:10px; color: var(--muted); }
.update-chip { justify-self:end; display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px; }
.section-heading { max-width: 820px; }
.video-grid, .json-grid, .grid-two { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; }
.video-card { border-radius:22px; overflow:hidden; padding: 18px; }
.video-shell { position:relative; height:280px; border-radius:20px; overflow:hidden; background: linear-gradient(135deg, rgba(133,255,213,.12), rgba(255,123,60,.14)); }
.video-shell video { width:100%; height:100%; object-fit:cover; }
.video-overlay {
  position:absolute; inset:0; display:flex; justify-content:space-between; align-items:flex-start; padding:16px;
  background: linear-gradient(180deg, rgba(2,6,6,.12), rgba(2,6,6,.5));
}
.play-button {
  align-self:center; display:inline-flex; align-items:center; justify-content:center; width:70px; height:70px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,123,60,.14); color:#fff; opacity:0;
  transition:opacity .25s ease, transform .25s ease;
}
.video-card:hover .play-button { opacity: 1; }
.video-copy { padding: 18px 2px 10px; }
.video-copy h3 { margin-top: 8px; font-size: 1.32rem; }
.video-meta, .footer-meta { display:flex; flex-wrap:wrap; gap:16px; color: var(--muted); }
.video-meta span, .footer-meta span, .breadcrumb-line span, .update-chip, .contact-link { display:inline-flex; align-items:center; gap:7px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.column-stack, .metric-list, .review-list, .faq-list { display:flex; flex-direction:column; gap:14px; }
.image-panel img, .wide-image { width:100%; height:280px; object-fit:cover; border-radius:22px; }
.image-panel-copy { padding-top: 18px; }
.json-view {
  overflow:auto; margin:0; padding:18px; max-height:420px; border-radius:20px; background:rgba(4,10,10,.84); color:#dcefe7;
  font-family: "JetBrains Mono", monospace; font-size:.9rem; line-height:1.75; border:1px solid rgba(255,255,255,.08);
}
.review-card footer { display:flex; justify-content:space-between; gap:12px; margin-top:14px; color: var(--signal); }
.faq-list details summary { cursor:pointer; font-weight:700; }
.contact-grid, .review-faq-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; }
.qr-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; margin-top:16px; }
.qr-card { text-align:center; }
.qr-card img { width: 100%; border-radius: 18px; border:1px solid rgba(255,255,255,.16); }
.footer-shell { grid-template-columns:minmax(0,1fr) auto; align-items:center; margin-top:22px; }
.footer-brand { display:flex; align-items:center; gap:14px; }
.noise-cluster { position:absolute; width:0; height:0; overflow:hidden; opacity:0; pointer-events:none; }
.noise-item { width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 1080px) {
  .topbar, .hero-grid, .search-strip, .breadcrumb-strip, .grid-two, .contact-grid, .review-faq-grid, .footer-shell { grid-template-columns: 1fr; }
  .topnav { justify-content:flex-start; }
  .hero-stats, .contact-list, .video-grid, .json-grid, .qr-grid { grid-template-columns: 1fr; }
  .update-chip { justify-self: start; }
}
@media (max-width: 720px) {
  .page-shell { width: min(100% - 16px, 100%); padding-top:12px; }
  .topbar, .surface, .footer-shell, .hero-copy { padding:18px; border-radius:22px; }
  h1 { font-size: 2.2rem; }
  .hero-visual { min-height:420px; }
  .video-shell { height:220px; }
  .brand-mark img, .footer-brand img { width:52px; height:52px; }
}