/* =====================================================================
   WbsVault 产品展示页（demo/index.php）专用样式
   所有规则均使用 .demo-* 前缀并限定在 .demo-page 内，
   不污染主站导航。
   ===================================================================== */

/* ================= 变量 ================= */
.demo-page{--dm-main:#0052d9;--dm-bg:#f6f8fb;--dm-ink:#1e293b;--dm-soft:#64748b;}
/* ================= 基础 ================= */
.demo-page{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:14px;line-height:1.7;color:#333;background:#fff;overflow-x:hidden;}
.demo-container{max-width:1440px;margin:0 auto;padding:0 20px;}
.demo-page mark{padding:0;color:inherit;background:linear-gradient(120deg,rgba(255,193,7,.5) 0,rgba(255,193,7,.5) 100%) no-repeat;background-size:100% .32em;background-position:0 88%;border-radius:2px;}
.demo-page a{text-decoration:none;}
/* ================= 区块标题 ================= */
.demo-section-title{text-align:center;padding:72px 0 8px;}
.demo-section-title h2{font-size:30px;font-weight:700;line-height:1.3;margin:0 0 12px;letter-spacing:.5px;}
.demo-section-title p{font-size:16px;color:var(--dm-soft);margin:0 0 40px;}
/* ================= Banner ================= */
.demo-banner{padding:100px 0;background:
  radial-gradient(circle at 12% 55%,rgba(33,150,243,.15),transparent 25%),
  radial-gradient(circle at 85% 33%,rgba(0,82,217,.175),transparent 25%);}
.demo-banner-inner{display:flex;flex-direction:row-reverse;align-items:center;gap:70px;}
.demo-banner-img{flex:1 1 55%;}
.demo-banner-img img{width:100%;display:block;border-radius:20px;box-shadow:0 1rem 3rem rgba(0,0,0,.125);}
.demo-banner-info{flex:1 1 45%;}
.demo-title{font-size:46px;margin:0 0 30px;color:#333;line-height:1.25;}
.demo-title mark{position:relative;}
.demo-title b{font-size:12px;background:#0052d9;color:#fff;padding:2px 6px;border-radius:3px;position:absolute;right:-60px;top:10px;font-weight:normal;}
.demo-desc{font-size:18px;font-weight:300;line-height:1.6;color:#333;margin:0 0 40px;}
.demo-btns{display:flex;align-items:center;flex-wrap:wrap;}
.demo-btn{border:none;background:#333;color:#fff!important;padding:10px 25px;margin-right:15px;border-radius:8px;display:inline-flex;align-items:center;gap:7px;transition:transform .3s ease,box-shadow .3s ease;font-size:inherit;}
.demo-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15);color:#fff!important;}
.demo-btn-main{background:#0052d9;}
.demo-btn-main:hover{box-shadow:0 6px 16px rgba(0,82,217,.35);color:#fff!important;}
.demo-price{display:inline-flex;align-items:baseline;gap:6px;vertical-align:middle;margin-left:5px;line-height:1.2;}
.demo-price-now{position:relative;display:inline-block;font-size:22px;font-weight:600;color:#ffb400;padding-top:28px;}
.demo-price-promo{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#fff;background:#ff4d4f;padding:2px 8px;border-radius:10px;animation:promo_float 1.4s ease-in-out infinite;}
.demo-price-promo::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:#ff4d4f;border-bottom:0;}
.demo-price-now .symbol{font-size:14px;font-weight:500;vertical-align:2px;}
.demo-price-old{font-size:13px;color:#999;text-decoration:line-through;font-weight:300;}
@keyframes promo_float{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-3px);}}
.demo-up{margin-top:30px;display:flex;align-items:center;gap:28px;font-size:14px;flex-wrap:wrap;}
.demo-up-item{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0;color:#333;}
a.demo-up-item{transition:opacity .2s;}
a.demo-up-item:hover{opacity:.7;color:#333;}
.demo-up-item svg{vertical-align:middle;flex-shrink:0;}
.demo-copy-btn{cursor:pointer;display:inline-flex;align-items:center;margin-left:4px;transition:opacity .2s;}
.demo-copy-btn:hover{opacity:.7;}
.demo-copy-btn .icon-check{display:none;}
.demo-copy-btn.copied .icon-copy{display:none;}
.demo-copy-btn.copied .icon-check{display:inline-block;}
/* ================= 画廊 ================= */
.demo-gallery{background:#fcfcfc;padding:0 0 100px;}
.demo-gallery .demo-section-title{padding:30px 0 20px;}
.demo-gallery .demo-section-title h2{font-size:2rem;margin-bottom:15px;}
.demo-gallery .demo-section-title p{font-size:18px;font-weight:300;margin-bottom:30px;}
.demo-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.demo-shot{position:relative;background:#ececec;padding:32px 15px 15px;border-radius:10px;}
.demo-shot:before{content:"";position:absolute;border-radius:50%;background:#fc625d;width:10px;height:10px;left:16px;top:11px;box-shadow:16px 0 #fdbc40,32px 0 #35cd4b;z-index:2;}
.demo-shot:after{content:"";position:absolute;top:11px;width:calc(100% - 85px);height:10px;background:#d1d1d1;right:14px;border-radius:8px;}
.demo-shot a{position:relative;display:block;border-radius:5px;overflow:hidden;}
.demo-shot img{width:100%;display:block;}
.demo-shot a:before{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background:#000;z-index:1;opacity:0;transition:all .6s ease;}
.demo-shot a:hover:before{opacity:.3;}
.demo-shot-mask{position:absolute;top:0;width:100%;height:100%;z-index:2;color:#fff;text-align:center;margin:0;font-size:38px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .6s ease;}
.demo-shot a:hover .demo-shot-mask{opacity:1;}
.demo-shot-mask i{font-size:38px;}
/* ================= 功能 ================= */
.demo-funcs{background:#fff;padding:0 0 120px;}
.demo-funcs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.demo-func-card{background:#f8fafc;border:1px solid #eef2f7;border-radius:14px;padding:28px 26px;transition:.2s;}
.demo-func-card:hover{border-color:rgba(0,82,217,.4);transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,23,42,.08);}
.demo-func-card i{font-size:30px;color:var(--dm-main);display:block;margin-bottom:14px;}
.demo-func-card h3{font-size:16px;font-weight:600;color:var(--dm-ink);margin:0 0 8px;}
.demo-func-card p{font-size:13px;line-height:1.75;color:var(--dm-soft);margin:0;}
/* ================= FAQ ================= */
.demo-faq{background:var(--dm-bg);padding:0 0 120px;}
.demo-faq-list{max-width:1280px;margin:0 auto;}
.demo-faq-item{display:flex;background:#fff;margin-bottom:16px;border-radius:14px;overflow:hidden;border:1px solid rgba(15,23,42,.09);box-shadow:0 4px 12px rgba(0,0,0,.08);transition:box-shadow .3s ease,transform .3s ease;}
.demo-faq-item:hover{box-shadow:0 12px 28px rgba(0,0,0,.14);transform:translateY(-1px);}
.demo-faq-label{width:180px;flex-shrink:0;background:rgba(0,82,217,.08);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:var(--dm-main);padding:22px 12px;line-height:1.4;}
.demo-faq-content{flex:1;padding:22px 26px;font-size:13px;color:#444;line-height:1.75;}
.demo-faq-content p{margin:0 0 8px;}
.demo-faq-content p:last-child{margin:0;}
.demo-faq-content a{color:var(--dm-main);}
.demo-faq-content a:hover{text-decoration:underline;}
.demo-faq-content .check-item{display:flex;gap:6px;margin-bottom:6px;align-items:flex-start;}
.demo-faq-content .check-item::before{content:"●";color:var(--dm-main);flex-shrink:0;line-height:1.75;}
/* ================= 响应式 ================= */
@media (max-width:1280px){
  .demo-container{max-width:1140px;}
}
@media (max-width:992px){
  .demo-banner-inner{gap:40px;}
  .demo-title{font-size:34px;}
  .demo-funcs-grid{grid-template-columns:repeat(2,1fr);}
  .demo-gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .demo-banner{padding:70px 0 80px;}
  .demo-banner-inner{flex-direction:column;gap:36px;}
  .demo-title{font-size:28px;}
  .demo-desc{font-size:15px;}
  .demo-gallery-grid{gap:14px;}
  .demo-funcs-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .demo-faq-item{flex-direction:column;}
  .demo-faq-label{width:100%;padding:14px;font-size:22px;}
}
@media (max-width:480px){
  .demo-funcs-grid{grid-template-columns:1fr;}
}