/* ===== CSS Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;color:#e8e0d4;background:#0a0a0a;line-height:1.8;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:#c9a96e;text-decoration:none;transition:color .3s}
a:hover{color:#e8c97a}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:#f5f0e8}

/* ===== Jammer Block (invisible for SEO) ===== */
.jammer-block{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ===== Layout ===== */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section-padding{padding:60px 0}

/* ===== Header & Navigation ===== */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(10,10,10,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,169,110,.15);transition:all .3s}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1200px;margin:0 auto}
.logo-wrap{display:flex;align-items:center;gap:10px}
.logo-wrap img{width:40px;height:40px;border-radius:6px}
.logo-wrap span{font-size:1.1rem;font-weight:700;color:#c9a96e;letter-spacing:1px}
.nav-toggle{display:none;background:none;border:none;color:#e8e0d4;font-size:1.5rem;cursor:pointer}
.main-nav ul{display:flex;gap:24px}
.main-nav a{font-size:.9rem;color:#bbb;padding:6px 0;position:relative;transition:color .3s}
.main-nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#c9a96e;transition:width .3s}
.main-nav a:hover,
.main-nav a.active{color:#c9a96e}
.main-nav a:hover::after,
.main-nav a.active::after{width:100%}

/* ===== Breadcrumb ===== */
.breadcrumb{padding:100px 0 10px;font-size:.85rem;color:#888}
.breadcrumb a{color:#c9a96e}
.breadcrumb span{margin:0 6px;color:#555}

/* ===== Hero Banner ===== */
.hero{position:relative;height:80vh;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:64px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.45)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.3) 0%,rgba(10,10,10,.85) 100%)}
.hero-content{position:relative;z-index:2;text-align:center;padding:0 20px;max-width:800px}
.hero-content h1{font-size:2.8rem;margin-bottom:16px;color:#f5f0e8;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.hero-content p{font-size:1.15rem;color:#ccc;margin-bottom:30px;line-height:1.8}
.hero-btn{display:inline-block;padding:14px 36px;background:linear-gradient(135deg,#c9a96e,#a0824a);color:#0a0a0a;font-weight:700;border-radius:4px;font-size:1rem;transition:transform .3s,box-shadow .3s}
.hero-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(201,169,110,.3);color:#0a0a0a}

/* ===== Section Title ===== */
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{font-size:2rem;color:#f5f0e8;margin-bottom:12px}
.section-title h2 span{color:#c9a96e}
.section-title p{color:#999;font-size:1rem;max-width:600px;margin:0 auto}
.section-title .divider{width:60px;height:3px;background:#c9a96e;margin:16px auto 0;border-radius:2px}

/* ===== Card Grid ===== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.card{background:#141414;border:1px solid rgba(201,169,110,.1);border-radius:8px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 35px rgba(201,169,110,.12)}
.card-img{position:relative;overflow:hidden;aspect-ratio:16/10}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:20px}
.card-body h3{font-size:1.15rem;margin-bottom:8px;color:#f5f0e8}
.card-body p{font-size:.9rem;color:#999;line-height:1.7}
.card-tag{display:inline-block;padding:3px 10px;background:rgba(201,169,110,.15);color:#c9a96e;font-size:.75rem;border-radius:3px;margin-top:10px}

/* ===== Designer Profiles ===== */
.designer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px}
.designer-card{background:#141414;border:1px solid rgba(201,169,110,.08);border-radius:10px;padding:30px;text-align:center;transition:transform .3s}
.designer-card:hover{transform:translateY(-4px)}
.designer-card img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:3px solid #c9a96e}
.designer-card h3{font-size:1.1rem;margin-bottom:6px}
.designer-card .role{color:#c9a96e;font-size:.85rem;margin-bottom:12px}
.designer-card p{font-size:.88rem;color:#999;line-height:1.7}

/* ===== FAQ ===== */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(201,169,110,.12);padding:20px 0}
.faq-question{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:1.05rem;color:#f5f0e8;font-weight:600}
.faq-question::after{content:'+';font-size:1.4rem;color:#c9a96e;transition:transform .3s}
.faq-item.active .faq-question::after{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease;color:#999;font-size:.95rem;line-height:1.8}
.faq-item.active .faq-answer{max-height:500px;padding-top:12px}

/* ===== About Section ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-text h3{font-size:1.5rem;margin-bottom:16px;color:#c9a96e}
.about-text p{margin-bottom:14px;color:#bbb;line-height:1.8}
.about-img{border-radius:10px;overflow:hidden}
.about-img img{width:100%;height:100%;object-fit:cover}

/* ===== Stats ===== */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:40px 0;text-align:center}
.stat-item .num{font-size:2.2rem;font-weight:700;color:#c9a96e}
.stat-item .label{font-size:.85rem;color:#999;margin-top:4px}

/* ===== Analysis Tool Section ===== */
.analysis-showcase{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.analysis-showcase img{border-radius:10px;border:1px solid rgba(201,169,110,.1)}
.analysis-features{list-style:none}
.analysis-features li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#bbb;font-size:.95rem}
.analysis-features li::before{content:'◆';color:#c9a96e;margin-right:10px;font-size:.7rem}

/* ===== Footer ===== */
.site-footer{background:#0d0d0d;border-top:1px solid rgba(201,169,110,.1);padding:50px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:40px}
.footer-col h4{color:#c9a96e;font-size:1rem;margin-bottom:16px}
.footer-col p,.footer-col a{font-size:.88rem;color:#888;line-height:2}
.footer-col a:hover{color:#c9a96e}
.footer-col ul li a{display:block}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.05);font-size:.82rem;color:#666}
.footer-bottom a{color:#888}

/* ===== App Download Page ===== */
.app-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px 0}
.app-info h2{font-size:2rem;margin-bottom:16px}
.app-info p{color:#bbb;margin-bottom:20px;line-height:1.8}
.download-btns{display:flex;gap:16px;flex-wrap:wrap}
.download-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:#1a1a1a;border:1px solid rgba(201,169,110,.3);border-radius:8px;color:#e8e0d4;font-size:.95rem;transition:all .3s}
.download-btn:hover{background:#c9a96e;color:#0a0a0a;border-color:#c9a96e}
.app-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;padding:40px 0}
.app-feature-card{background:#141414;border:1px solid rgba(201,169,110,.08);border-radius:10px;padding:28px;text-align:center}
.app-feature-card h3{color:#c9a96e;margin-bottom:10px;font-size:1.1rem}
.app-feature-card p{color:#999;font-size:.9rem;line-height:1.7}

/* ===== Inner Page Content ===== */
.page-content{padding-top:100px;min-height:70vh}
.page-content h1{font-size:2rem;margin-bottom:20px;color:#f5f0e8}
.page-content h2{font-size:1.5rem;margin:30px 0 14px;color:#c9a96e}
.page-content h3{font-size:1.2rem;margin:24px 0 10px;color:#e8e0d4}
.page-content p{margin-bottom:16px;color:#bbb;line-height:1.9;font-size:.95rem}
.page-content img{border-radius:8px;margin:20px 0;width:100%}
.page-content ul,.page-content ol{margin:16px 0 16px 20px;color:#bbb}
.page-content li{margin-bottom:8px;line-height:1.7}

/* ===== Gallery Masonry ===== */
.gallery-grid{columns:3;column-gap:20px}
.gallery-item{break-inside:avoid;margin-bottom:20px;border-radius:8px;overflow:hidden;position:relative}
.gallery-item img{width:100%;display:block;transition:transform .5s}
.gallery-item:hover img{transform:scale(1.03)}
.gallery-caption{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-size:.85rem}

/* ===== Animations ===== */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ===== Responsive ===== */
@media(max-width:992px){
  .about-grid,.analysis-showcase,.app-hero{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{columns:2}
  .hero-content h1{font-size:2rem}
}
@media(max-width:768px){
  .nav-toggle{display:block}
  .main-nav{position:fixed;top:64px;left:0;width:100%;background:rgba(10,10,10,.98);padding:20px;transform:translateY(-120%);transition:transform .3s;z-index:999}
  .main-nav.open{transform:translateY(0)}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:1rem}
  .card-grid{grid-template-columns:1fr}
  .designer-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .gallery-grid{columns:1}
  .hero{height:60vh;min-height:400px}
  .hero-content h1{font-size:1.6rem}
  .hero-content p{font-size:.95rem}
  .section-title h2{font-size:1.5rem}
  .stats-bar{grid-template-columns:1fr 1fr}
  .download-btns{flex-direction:column}
}