:root{
    --neon-cyan:#00f3ff;
    --neon-pink:#ff2fb9;
    --neon-purple:#8a2be2;
    --dark-bg:#06050b;
    --panel-bg:#100d1c;
    --text-main:#e4e1f5;
    --text-muted:#8f8ba8;
    --border-glow:rgba(0,243,255,0.3);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    background-color:var(--dark-bg);
    color:var(--text-main);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    background-image:
      radial-gradient(circle at 15% 50%, rgba(138,43,226,0.08) 0%, transparent 40%),
      radial-gradient(circle at 85% 30%, rgba(0,243,255,0.06) 0%, transparent 40%);
  }
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}

  /* ================= 导航 ================= */
  .cyber-header{
    position:sticky;top:0;z-index:1000;
    background:rgba(6,5,11,0.85);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-glow);
  }
  .nav-container{
    max-width:1200px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 20px;
  }
  .logo-area{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900;letter-spacing:1px;}
  .logo-area img{height:34px;border-radius:6px;}
  .logo-area span{color:var(--neon-cyan);text-shadow:0 0 8px rgba(0,243,255,0.6);}
  .nav-links{display:flex;gap:24px;font-size:15px;font-weight:600;}
  .nav-links a{transition:color 0.3s,text-shadow 0.3s;}
  .nav-links a:hover{color:var(--neon-pink);text-shadow:0 0 8px rgba(255,47,185,0.8);}
  .header-actions{display:flex;gap:12px;}
  .btn-neon{
    padding:8px 18px;border-radius:4px;font-size:14px;font-weight:700;
    border:1px solid var(--neon-cyan);color:var(--neon-cyan);
    background:transparent;cursor:pointer;
    box-shadow:0 0 10px rgba(0,243,255,0.1);
    transition:all 0.3s;
  }
  .btn-neon:hover{background:var(--neon-cyan);color:var(--dark-bg);box-shadow:0 0 20px rgba(0,243,255,0.5);}
  .btn-neon.pink{border-color:var(--neon-pink);color:var(--neon-pink);}
  .btn-neon.pink:hover{background:var(--neon-pink);color:var(--dark-bg);box-shadow:0 0 20px rgba(255,47,185,0.5);}

  /* ================= 核心布局 ================= */
  .container{max-width:1200px;margin:0 auto;padding:0 20px;}
  section{padding:60px 0;scroll-margin-top:70px;}
  .cyber-title{
    font-size:32px;font-weight:900;margin-bottom:30px;display:flex;align-items:center;gap:12px;
  }
  .cyber-title::before{
    content:"";display:inline-block;width:6px;height:28px;
    background:linear-gradient(to bottom,var(--neon-cyan),var(--neon-purple));
    border-radius:2px;box-shadow:0 0 10px var(--neon-cyan);
  }

  /* ================= 首屏 ================= */
  .hero{
    display:flex;align-items:center;justify-content:space-between;gap:40px;
    padding:80px 0 40px;min-height:80vh;
  }
  .hero-text{flex:1;}
  .hero-text h1{
    font-size:48px;line-height:1.2;margin-bottom:20px;
    background:linear-gradient(90deg,#fff,var(--neon-cyan));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  }
  .hero-text p{color:var(--text-muted);font-size:18px;margin-bottom:20px;}
  .hero-badges{display:flex;gap:12px;margin-bottom:30px;flex-wrap:wrap;}
  .badge{
    border:1px solid var(--border-glow);padding:4px 12px;border-radius:20px;
    font-size:13px;color:var(--neon-cyan);background:rgba(0,243,255,0.05);
  }
  .hero-download{
    display:inline-block;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));
    color:#fff;font-size:18px;font-weight:900;padding:16px 40px;border-radius:6px;
    box-shadow:0 0 20px rgba(0,243,255,0.4);transition:transform 0.2s;
  }
  .hero-download:hover{transform:translateY(-2px) scale(1.02);}
  .hero-visual{flex:0 0 380px;position:relative;perspective:1000px;}
  .hero-visual img{width:100%;border-radius:16px;box-shadow:0 0 30px rgba(138,43,226,0.3);border:1px solid var(--border-glow);}

  /* ================= 瀑布流 ================= */
  .masonry{
    column-count:3;column-gap:20px;
  }
  .masonry-item{
    break-inside:avoid;margin-bottom:20px;border-radius:12px;overflow:hidden;
    border:1px solid rgba(255,255,255,0.05);transition:border-color 0.3s;
  }
  .masonry-item:hover{border-color:var(--neon-pink);}
  .masonry-item img{width:100%;display:block;}
  .masonry-info{padding:12px;background:var(--panel-bg);}
  .masonry-info h3{font-size:16px;margin-bottom:4px;color:#fff;}
  .masonry-info p{font-size:13px;color:var(--text-muted);}

  /* ================= 基础模块 ================= */
  .module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  .cyber-card{
    background:var(--panel-bg);border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;padding:24px;position:relative;overflow:hidden;
  }
  .cyber-card::after{
    content:"";position:absolute;top:0;left:0;width:100%;height:2px;
    background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);opacity:0.5;
  }
  .cyber-card h3{font-size:20px;margin-bottom:12px;color:var(--neon-cyan);}
  .cyber-card p{font-size:14px;color:var(--text-muted);}
  .cyber-card img{width:100%;border-radius:8px;margin-top:12px;border:1px solid rgba(255,255,255,0.1);}

  /* ================= 滚动弹幕 ================= */
  .marquee-wrap{
    background:#0a0814;border:1px solid var(--border-glow);border-radius:8px;
    padding:12px 0;overflow:hidden;white-space:nowrap;margin-bottom:24px;
  }
  .marquee-content{
    display:inline-block;animation:marquee 15s linear infinite;
  }
  .marquee-content span{
    display:inline-block;margin:0 20px;font-size:15px;color:var(--neon-cyan);font-weight:600;
  }
  .marquee-content span.pink{color:var(--neon-pink);}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ================= FAQ ================= */
  .faq-item{margin-bottom:12px;border:1px solid rgba(255,255,255,0.1);border-radius:8px;background:var(--panel-bg);}
  .faq-q{
    padding:16px 20px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  }
  .faq-q::after{content:"+";color:var(--neon-cyan);font-size:20px;}
  .faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.3s ease;color:var(--text-muted);font-size:14px;}
  .faq-item.active .faq-a{max-height:200px;padding:0 20px 16px;}
  .faq-item.active .faq-q::after{content:"-";}

  /* ================= 3D 旋转轮播 ================= */
  .carousel-3d-wrap{
    height:400px;display:flex;align-items:center;justify-content:center;
    perspective:1200px;position:relative;overflow:hidden;
  }
  .carousel-3d-inner{
    width:200px;height:280px;position:relative;transform-style:preserve-3d;
    animation:rotate3d 20s linear infinite;
  }
  .carousel-3d-inner:hover{animation-play-state:paused;}
  .carousel-3d-item{
    position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;overflow:hidden;
    border:1px solid var(--neon-cyan);box-shadow:0 0 15px rgba(0,243,255,0.2);
  }
  .carousel-3d-item img{width:100%;height:100%;object-fit:cover;}
  .carousel-3d-item:nth-child(1){transform:rotateY(0deg) translateZ(300px);}
  .carousel-3d-item:nth-child(2){transform:rotateY(60deg) translateZ(300px);}
  .carousel-3d-item:nth-child(3){transform:rotateY(120deg) translateZ(300px);}
  .carousel-3d-item:nth-child(4){transform:rotateY(180deg) translateZ(300px);}
  .carousel-3d-item:nth-child(5){transform:rotateY(240deg) translateZ(300px);}
  .carousel-3d-item:nth-child(6){transform:rotateY(300deg) translateZ(300px);}
  @keyframes rotate3d{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}

  /* ================= 底部相关搜索 ================= */
  .seo-cloud{padding:40px 0;border-top:1px solid rgba(255,255,255,0.05);}
  .seo-cloud h2{font-size:18px;margin-bottom:16px;color:var(--text-muted);font-weight:600;}
  .seo-tags{display:flex;flex-wrap:wrap;gap:10px;}
  .seo-tags span{font-size:13px;color:#5c5a70;cursor:default;}
  .footer-bottom{padding:20px 0;text-align:center;font-size:13px;color:#5c5a70;}
  .footer-bottom time{opacity:0.7;}

  @media (max-width:1024px){
    .hero{flex-direction:column;text-align:center;gap:30px;padding:40px 0;}
    .hero-text h1{font-size:36px;}
    .hero-visual{flex:auto;width:280px;}
    .masonry{column-count:2;}
    .module-grid{grid-template-columns:1fr;}
  }
  @media (max-width:768px){
    .nav-links{display:none;}
    .header-actions .btn-neon{padding:6px 12px;font-size:12px;}
    .masonry{column-count:1;}
    .cyber-title{font-size:24px;}
    .carousel-3d-wrap{transform:scale(0.8);}
  }