:root{
  --bg:#fbfcff;
  --ink:#17182c;
  --muted:#68708a;
  --line:rgba(90,110,160,.18);
  --glass:rgba(255,255,255,.72);
  --pink:#ff43b1;
  --blue:#38c7ff;
  --violet:#7a5cff;
  --green:#18d6b8;
  --shadow:0 28px 80px rgba(64,87,150,.18);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%,rgba(255,67,177,.18),transparent 28rem),
    radial-gradient(circle at 88% 12%,rgba(56,199,255,.20),transparent 30rem),
    linear-gradient(180deg,#fff 0%,#f7faff 55%,#ffffff 100%);
  line-height:1.72;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(122,92,255,.12) 1px,transparent 1px),
    radial-gradient(circle,rgba(56,199,255,.12) 1px,transparent 1px);
  background-size:42px 42px,70px 70px;
  background-position:0 0,20px 30px;
  animation:particleFloat 18s linear infinite;
  z-index:-1;
}
@keyframes particleFloat{to{background-position:42px 84px,90px 120px}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.7rem 1rem;border-radius:999px;background:#fff;box-shadow:var(--shadow);z-index:10}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  padding:1rem min(4vw,3rem);
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.7);
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1280px;margin:0 auto .9rem}
.brand-logo{display:inline-flex;align-items:center;gap:.75rem;font-weight:900;letter-spacing:.02em}
.logo-mark{
  width:3.2rem;height:3.2rem;border-radius:1.1rem;
  display:grid;place-items:center;
  color:#fff;font-weight:900;
  background:linear-gradient(135deg,var(--pink),var(--blue));
  box-shadow:0 18px 42px rgba(255,67,177,.30);
}
.logo-text{font-size:1.35rem;display:flex;flex-direction:column;line-height:1.1}
.logo-text em{font-size:.72rem;color:var(--muted);font-style:normal;font-weight:700}
.domain-pill{
  margin:0;
  padding:.55rem .9rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:var(--muted);
  font-size:.92rem;
}
.domain-pill strong{color:var(--ink)}
.main-nav{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  align-items:center;
}
.main-nav a{
  padding:.65rem .9rem;
  border-radius:999px;
  color:#3b3f59;
  font-weight:800;
  font-size:.95rem;
  border:1px solid transparent;
}
.main-nav a:hover,.main-nav a.active{
  background:linear-gradient(135deg,rgba(255,67,177,.12),rgba(56,199,255,.16));
  border-color:rgba(122,92,255,.16);
  color:#11142a;
}
.fake-search{
  max-width:1280px;
  margin:.9rem auto 0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.65rem;
  align-items:center;
  padding:.68rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  box-shadow:0 16px 46px rgba(82,103,160,.10);
}
.search-label{font-weight:900;color:#2e3350;padding-left:.6rem}
.fake-search input{
  border:0;
  outline:0;
  background:transparent;
  min-width:0;
  font-size:1rem;
  color:var(--ink);
}
.fake-search button,.primary-btn,.secondary-btn{
  border:0;
  border-radius:999px;
  padding:.82rem 1.18rem;
  cursor:pointer;
  font-weight:900;
  white-space:nowrap;
}
.fake-search button,.primary-btn{
  color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--blue));
  box-shadow:0 14px 32px rgba(56,199,255,.22);
}
.secondary-btn{background:#fff;border:1px solid var(--line);color:#1b1f3c}
.search-feedback{
  grid-column:2/4;
  color:var(--muted);
  font-size:.86rem;
  min-height:1.2rem;
}
main{max-width:1280px;margin:0 auto;padding:2rem min(4vw,3rem) 4rem}
.hero-section,.page-hero{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:2rem;
  align-items:center;
  min-height:72vh;
  padding:3rem 0 2rem;
}
.page-hero{min-height:auto;padding:3rem 0}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:0 0 .8rem;
  font-size:.9rem;
  font-weight:900;
  color:#b41879;
  background:linear-gradient(135deg,rgba(255,67,177,.12),rgba(56,199,255,.16));
  padding:.42rem .75rem;
  border-radius:999px;
}
h1,h2,h3{line-height:1.16;margin:0;color:#11142a}
h1{font-size:clamp(2.4rem,6vw,5.8rem);letter-spacing:-.08em}
h2{font-size:clamp(1.9rem,3.4vw,3.3rem);letter-spacing:-.045em}
h3{font-size:1.16rem}
.hero-copy>p:not(.eyebrow),.page-hero p:not(.eyebrow),.section-title p,.video-body p,.feature-card p,.topic-card p,.expert-card p,.review-card p,.guide-grid p,.contact-card p,.site-footer p{
  color:var(--muted);
}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.6rem 0}
.hero-metrics{display:flex;gap:.7rem;flex-wrap:wrap}
.hero-metrics span{
  display:inline-flex;
  gap:.35rem;
  align-items:center;
  padding:.7rem .9rem;
  border:1px solid var(--line);
  border-radius:1rem;
  background:rgba(255,255,255,.68);
  color:var(--muted);
}
.hero-metrics b{color:var(--ink)}
.hero-visual,.page-hero figure{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  margin:0;
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.8);
}
.hero-visual img,.page-hero img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hero-visual figcaption,.page-hero figcaption{padding:.9rem 1rem;color:var(--muted);font-size:.88rem;background:rgba(255,255,255,.75)}
.floating-card{
  position:absolute;left:1rem;bottom:4rem;
  max-width:18rem;
  padding:1rem;
  border-radius:1.2rem;
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 60px rgba(20,28,78,.18);
}
.floating-card p{margin:.2rem 0 0;color:var(--muted)}
.live-dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:var(--pink);box-shadow:0 0 0 .45rem rgba(255,67,177,.15);margin-right:.45rem}
.section-panel{
  position:relative;
  margin:2rem 0;
  padding:2rem;
  border-radius:calc(var(--radius) + 8px);
  background:rgba(255,255,255,.64);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 24px 76px rgba(69,88,145,.12);
  overflow:hidden;
}
.section-panel:before{
  content:"";
  position:absolute;
  width:18rem;height:18rem;right:-8rem;top:-8rem;
  background:radial-gradient(circle,rgba(56,199,255,.18),transparent 70%);
  pointer-events:none;
}
.section-title{max-width:760px;margin-bottom:1.5rem}
.video-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.video-card{
  position:relative;
  overflow:hidden;
  border-radius:1.6rem;
  background:#fff;
  border:1px solid rgba(108,126,180,.14);
  box-shadow:0 16px 42px rgba(64,83,145,.10);
  transition:transform .28s ease,box-shadow .28s ease;
}
.video-card:hover{transform:translateY(-8px);box-shadow:0 30px 78px rgba(56,199,255,.20)}
.video-cover{position:relative;overflow:hidden;background:#f2f6ff}
.video-cover img,.mock-video{width:100%;aspect-ratio:16/10;object-fit:cover}
.mock-video{position:absolute;inset:0;opacity:0;pointer-events:none}
.video-cover:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(15,18,42,.62));
  opacity:.75;
}
.play-hover{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.82);
  width:4rem;height:4rem;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.9);
  color:var(--pink);
  font-weight:900;
  font-size:1.5rem;
  opacity:0;
  z-index:2;
  box-shadow:0 20px 50px rgba(255,67,177,.30);
  transition:.25s ease;
}
.video-card:hover .play-hover{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cover-domain{
  position:absolute;left:.9rem;right:.9rem;bottom:.8rem;
  z-index:2;
  color:#fff;
  font-size:.76rem;
  opacity:.92;
}
.video-body{padding:1rem}
.video-kicker{font-size:.82rem;font-weight:900;color:#b41879!important;margin:.1rem 0 .4rem}
.video-body h3{margin-bottom:.45rem}
.tag-row{display:flex;flex-wrap:wrap;gap:.35rem;margin:.8rem 0}
.tag-row span{
  padding:.35rem .55rem;
  border-radius:999px;
  background:rgba(56,199,255,.12);
  color:#245075;
  font-size:.78rem;
  font-weight:800;
}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin:.9rem 0 0}
.stats div{padding:.55rem;border-radius:.9rem;background:linear-gradient(135deg,rgba(255,67,177,.09),rgba(56,199,255,.10))}
.stats dt{font-size:.72rem;color:var(--muted)}
.stats dd{margin:0;font-weight:900;color:#11142a}
.topic-grid,.feature-grid,.expert-grid,.review-grid,.guide-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.topic-card,.feature-card,.expert-card,.review-card,.guide-grid article,.contact-card{
  padding:1.2rem;
  border-radius:1.4rem;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(64,83,145,.08);
}
.pulse{
  display:inline-block;
  width:.8rem;height:.8rem;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 .5rem rgba(24,214,184,.16);
  margin-bottom:.8rem;
}
.danmu-wall{
  margin-top:1rem;
  min-height:4.2rem;
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  align-items:center;
  padding:1rem;
  border-radius:1.3rem;
  background:linear-gradient(135deg,rgba(20,22,50,.92),rgba(45,49,95,.90));
  color:#fff;
  overflow:hidden;
}
.danmu-wall span{
  padding:.45rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  animation:danmu 10s linear infinite;
}
.danmu-wall span:nth-child(2){animation-delay:-2s}.danmu-wall span:nth-child(3){animation-delay:-4s}.danmu-wall span:nth-child(4){animation-delay:-6s}
@keyframes danmu{from{transform:translateX(20px)}to{transform:translateX(-30px)}}
.avatar{
  width:3.2rem;height:3.2rem;border-radius:1.1rem;
  display:grid;place-items:center;
  color:#fff;font-weight:900;
  background:linear-gradient(135deg,var(--violet),var(--blue));
  margin-bottom:.85rem;
}
.role{font-weight:900;color:#b41879!important}
.score{
  display:inline-grid;place-items:center;
  width:3.2rem;height:3.2rem;border-radius:50%;
  color:#fff;font-weight:900;
  background:linear-gradient(135deg,var(--pink),var(--violet));
}
.logo-wall{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.8rem;
  margin-bottom:1rem;
}
.logo-wall span{
  min-height:5.4rem;
  display:grid;place-items:center;
  text-align:center;
  border-radius:1.2rem;
  background:rgba(255,255,255,.72);
  border:1px dashed rgba(122,92,255,.28);
  font-weight:900;
  color:#3b3f59;
}
.faq-list{display:grid;gap:.75rem}
.faq-list details{
  padding:1rem 1.1rem;
  border-radius:1.1rem;
  background:rgba(255,255,255,.75);
  border:1px solid var(--line);
}
.faq-list summary{cursor:pointer;font-weight:900}
.faq-list p{color:var(--muted);margin:.65rem 0 0}
.contact-card{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1rem;
  align-items:center;
}
.clean-list{padding-left:1.2rem;color:var(--muted)}
.qr-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.qr-panel figure{margin:0;padding:.8rem;border-radius:1.2rem;background:#fff;border:1px solid var(--line)}
.qr-panel img{width:100%;max-width:180px;margin:auto}
.qr-panel figcaption{font-size:.82rem;text-align:center;color:var(--muted);margin-top:.5rem}
.site-footer{
  padding:2.5rem min(4vw,3rem);
  background:linear-gradient(135deg,#121529,#242850);
  color:#fff;
}
.footer-grid{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr;
  gap:1.4rem;
}
.site-footer p,.site-footer a{color:rgba(255,255,255,.72)}
.site-footer h2{color:#fff;font-size:1.3rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.45rem}
.footer-links a{padding:.45rem .65rem;border-radius:999px;background:rgba(255,255,255,.08)}
.footer-logo{margin-bottom:.8rem}
.domain-note{
  display:inline-flex;
  padding:.55rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
}
@media (max-width: 1020px){
  .hero-section,.page-hero,.contact-card,.footer-grid{grid-template-columns:1fr}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic-grid,.feature-grid,.expert-grid,.review-grid,.guide-grid,.logo-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 680px){
  .site-header{position:relative}
  .topbar{align-items:flex-start;flex-direction:column}
  .fake-search{grid-template-columns:1fr;border-radius:1.4rem}
  .search-label,.search-feedback{grid-column:auto}
  .fake-search button{width:100%}
  main{padding:1rem}
  .hero-section,.page-hero{padding:1.5rem 0}
  .section-panel{padding:1rem;border-radius:1.5rem}
  .video-grid,.topic-grid,.feature-grid,.expert-grid,.review-grid,.guide-grid,.logo-wall,.qr-panel{grid-template-columns:1fr}
  .floating-card{position:static;margin:1rem}
  h1{font-size:clamp(2.1rem,12vw,3.5rem)}
}