/* DFUIUX SaaS 官网首页样式（依赖 shared/theme.css 的 token） */

.home-page{position:relative;z-index:1;}
.home-page main{display:block;}

/* 顶部导航 */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  border-bottom:1px solid var(--border-glass);
  background:var(--header-bg);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--header-glow);
}
.site-nav-inner{max-width:none;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:16px;}
.site-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text-primary);flex:none;min-width:0;}
.site-logo{width:40px;height:40px;border-radius:12px;background:var(--gradient-main);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;}
.site-nav .site-logo{width:42px;height:42px;border-radius:12px;}
.site-brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.site-brand-text b{font-size:17px;font-weight:800;letter-spacing:.01em;}
.site-brand-text small{font-size:12px;color:var(--text-secondary);}
.site-links{display:flex;align-items:center;gap:22px;margin-left:8px;}
.site-links a{color:var(--text-secondary);text-decoration:none;font-size:13.5px;font-weight:600;transition:color .2s ease;}
.site-links a:hover{color:var(--text-primary);}
.site-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}

/* Hero */
.hp-hero{max-width:980px;margin:0 auto;padding:140px 28px 40px;text-align:center;}
.hp-hero-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:var(--radius-pill);
  border:1px solid rgba(var(--accent-1-rgb),.4);background:rgba(var(--accent-1-rgb),.1);
  color:var(--accent-soft);font-size:12.5px;font-weight:700;letter-spacing:.02em;}
.hp-hero-title{margin-top:24px;font-size:clamp(30px,5vw,54px);font-weight:900;line-height:1.18;letter-spacing:-.02em;}
.grad-text{background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hp-hero-sub{max-width:720px;margin:20px auto 0;color:var(--text-secondary);font-size:16px;line-height:1.8;}
.hp-hero-cta{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px;flex-wrap:wrap;}
.hp-btn{height:48px;padding:0 26px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:700;text-decoration:none;color:var(--text-primary);
  border:1px solid var(--border-glass);background:var(--bg-card);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .28s ease;}
.hp-btn:hover{transform:translateY(-2px);border-color:rgba(var(--accent-1-rgb),.6);}
.hp-btn-primary{background:var(--gradient-main);border-color:transparent;color:#fff;box-shadow:0 12px 34px -12px rgba(var(--accent-1-rgb),.9);}
.hp-btn-primary:hover{color:#fff;filter:brightness(1.06);}
.hp-btn-ghost{background:transparent;}
.hp-hero-stats{display:flex;justify-content:center;gap:52px;margin-top:54px;flex-wrap:wrap;}
.hp-stat{display:flex;flex-direction:column;align-items:center;gap:4px;}
.hp-stat b{font-size:30px;font-weight:900;background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hp-stat span{font-size:12.5px;color:var(--text-secondary);}

/* 区块 */
.hp-section{max-width:1240px;margin:0 auto;padding:52px 28px;}
.hp-section-head{margin-bottom:30px;max-width:680px;}
.hp-section-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;max-width:none;}
.hp-kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent-soft);margin-bottom:10px;}
.hp-section-head h2{font-size:clamp(22px,3vw,30px);font-weight:900;letter-spacing:-.01em;}
.hp-section-head p{margin-top:10px;color:var(--text-secondary);font-size:14.5px;line-height:1.7;}
.hp-link{display:inline-flex;align-items:center;gap:4px;color:var(--accent-soft);text-decoration:none;font-size:13.5px;font-weight:700;white-space:nowrap;}
.hp-link:hover{text-decoration:underline;}
.hp-loading{grid-column:1/-1;padding:40px;text-align:center;color:var(--text-secondary);font-size:13.5px;}

/* 流程 */
.hp-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.hp-flow-node{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--border-glass);background:var(--bg-card);font-size:13.5px;font-weight:700;}
.hp-flow-num{font-weight:900;background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hp-flow-arrow{color:var(--text-secondary);display:flex;}

/* 产品卡片 */
.hp-products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hp-product{display:flex;flex-direction:column;gap:14px;padding:28px 26px;border-radius:var(--radius-lg);
  background:var(--bg-card);border:1px solid var(--border-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .28s ease,border-color .28s ease;}
.hp-product:hover{transform:translateY(-5px);}
.hp-product--mindmap:hover{border-color:rgba(124,58,237,.5);}
.hp-product--ppt:hover{border-color:rgba(59,130,246,.5);}
.hp-product--schedule:hover{border-color:rgba(16,185,129,.5);}
.hp-product-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.hp-product-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;}
.hp-product--mindmap .hp-product-icon{background:linear-gradient(135deg,#7c3aed,#a855f7);}
.hp-product--ppt .hp-product-icon{background:linear-gradient(135deg,#3b82f6,#06b6d4);}
.hp-product--schedule .hp-product-icon{background:linear-gradient(135deg,#10b981,#14b8a6);}
.hp-product-step{font-size:11.5px;font-weight:700;color:var(--text-secondary);letter-spacing:.04em;}
.hp-product h3{font-size:20px;font-weight:900;}
.hp-product-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.7;}
.hp-feature-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.hp-feature-list li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text-primary);line-height:1.5;}
.hp-feature-list .ic{color:var(--accent-soft);margin-top:1px;}
.hp-product-actions{margin-top:auto;padding-top:8px;}

/* 推荐 / 社区卡片网格 */
.hp-rec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.hp-community-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.hp-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-primary);
  background:var(--bg-card);border:1px solid var(--border-glass);position:relative;transition:transform .2s ease,border-color .2s ease,background .2s ease;}
.hp-card:hover{transform:translateY(-2px);border-color:rgba(var(--accent-1-rgb),.5);background:rgba(var(--accent-1-rgb),.05);}
.hp-card-icon{flex:none;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-glass);color:var(--accent-soft);}
.hp-card--mindmap .hp-card-icon{color:#a855f7;}
.hp-card--ppt .hp-card-icon{color:#3b82f6;}
.hp-card--schedule .hp-card-icon{color:#10b981;}
.hp-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
.hp-card-title{display:flex;align-items:center;gap:8px;min-width:0;font-size:14.5px;font-weight:800;line-height:1.35;}
.hp-card-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hp-card-pin{flex:none;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:800;background:var(--gradient-main);color:#fff;}
.hp-card-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-secondary);flex-wrap:wrap;}
.hp-card-meta .m{display:inline-flex;align-items:center;gap:4px;}
.hp-card-go{flex:none;color:var(--text-secondary);display:flex;transition:transform .2s ease,color .2s ease;}
.hp-card:hover .hp-card-go{color:var(--accent-soft);transform:translateX(2px);}
.hp-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;border:1px solid var(--border-glass);}
.hp-badge--mindmap{color:#c4b5fd;border-color:rgba(124,58,237,.45);background:rgba(124,58,237,.16);}
.hp-badge--ppt{color:#93c5fd;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.16);}
.hp-badge--schedule{color:#6ee7b7;border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.16);}
[data-theme="gray"] .hp-badge--mindmap,[data-theme="white"] .hp-badge--mindmap{color:#6d28d9;background:rgba(124,58,237,.1);}
[data-theme="gray"] .hp-badge--ppt,[data-theme="white"] .hp-badge--ppt{color:#1d4ed8;background:rgba(59,130,246,.1);}
[data-theme="gray"] .hp-badge--schedule,[data-theme="white"] .hp-badge--schedule{color:#047857;background:rgba(16,185,129,.12);}

/* 用户故事（自动轮播） */
.hp-stories{position:relative;width:100%;}
.hp-story{display:none;grid-template-columns:auto 1fr;gap:22px;align-items:flex-start;padding:30px 32px;border-radius:var(--radius-lg);
  background:var(--bg-card);border:1px solid var(--border-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.hp-story.active{display:grid;animation:hpStoryIn .5s ease;}
@keyframes hpStoryIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.hp-story-icon{flex:none;width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));}
.hp-story--mindmap .hp-story-icon{background:linear-gradient(135deg,#7c3aed,#a855f7);}
.hp-story--ppt .hp-story-icon{background:linear-gradient(135deg,#3b82f6,#06b6d4);}
.hp-story--schedule .hp-story-icon{background:linear-gradient(135deg,#10b981,#14b8a6);}
.hp-story-body{display:flex;flex-direction:column;gap:9px;min-width:0;}
.hp-story-role{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--accent-soft);}
.hp-story-title{font-size:clamp(18px,2.4vw,24px);font-weight:900;line-height:1.35;}
.hp-story-desc{font-size:14px;color:var(--text-secondary);line-height:1.8;max-width:760px;}
.hp-story-dots{display:flex;gap:8px;margin-top:16px;}
.hp-story-dot{width:9px;height:9px;border-radius:50%;border:none;background:var(--border-glass);cursor:pointer;transition:all .25s ease;padding:0;}
.hp-story-dot.active{width:24px;border-radius:var(--radius-pill);background:var(--gradient-main);}

/* 定价 */
.hp-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.hp-price{display:flex;flex-direction:column;gap:14px;padding:26px 24px;border-radius:var(--radius-lg);
  background:var(--bg-card);border:1px solid var(--border-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.hp-price--plan{border-color:rgba(var(--accent-1-rgb),.42);}
.hp-price--free{border-style:dashed;}
.hp-price-feats li.off{opacity:.7;}
.hp-price-feats li.off .ic{color:var(--text-secondary);}
.hp-price-tag{align-self:flex-start;padding:3px 12px;border-radius:var(--radius-pill);font-size:11px;font-weight:800;letter-spacing:.06em;
  background:rgba(var(--accent-1-rgb),.14);color:var(--accent-soft);}
.hp-price-name{font-size:16px;font-weight:800;}
.hp-price-num{display:flex;align-items:baseline;gap:8px;}
.hp-price-num b{font-size:34px;font-weight:900;background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hp-price-num span{font-size:13px;color:var(--text-secondary);}
.hp-price-feats{list-style:none;display:flex;flex-direction:column;gap:8px;}
.hp-price-feats li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);line-height:1.5;}
.hp-price-feats .ic{color:var(--accent-soft);flex:none;}
.hp-price .hp-btn{margin-top:auto;justify-content:center;}
.hp-pricing-note{margin-top:18px;font-size:12.5px;color:var(--text-secondary);}

/* 底部行动区 */
.hp-cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:38px 40px;border-radius:var(--radius-lg);border:1px solid var(--border-glass);
  background:linear-gradient(135deg,rgba(var(--accent-1-rgb),.16),rgba(var(--accent-2-rgb),.12));}
.hp-cta-band h2{font-size:clamp(20px,2.6vw,26px);font-weight:900;}
.hp-cta-band p{margin-top:8px;color:var(--text-secondary);font-size:14px;}
.hp-cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* 页脚 */
.site-footer{margin-top:40px;border-top:1px solid var(--border-glass);padding:34px 28px 44px;}
.site-footer-inner{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;}
.site-footer-brand{display:flex;align-items:center;gap:12px;text-align:left;}
.site-footer-brand b{font-size:15px;font-weight:900;letter-spacing:.05em;}
.site-footer-sub{font-size:12px;color:var(--text-secondary);margin-top:2px;}
.site-footer-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.site-footer-links a{color:var(--text-secondary);text-decoration:none;font-size:13px;font-weight:600;}
.site-footer-links a:hover{color:var(--text-primary);}
.site-footer-copy{font-size:12px;color:var(--text-secondary);}
.site-footer-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;font-size:12px;color:var(--text-secondary);}
.site-footer-legal a{color:var(--text-secondary);text-decoration:none;}
.site-footer-legal a:hover{color:var(--text-primary);}

@media (max-width:1024px){
  .hp-products{grid-template-columns:1fr;}
  .hp-rec-grid{grid-template-columns:repeat(2,1fr);}
  .hp-community-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .site-links{display:none;}
  .site-nav-inner{padding:11px 16px;gap:10px;}
  .site-brand{gap:10px;}
  .site-nav .site-logo{width:38px;height:38px;border-radius:11px;}
  .site-brand-text b{font-size:15px;}
  .site-brand-text small{display:none;}
  .hp-hero{padding:118px 18px 28px;}
  .hp-section{padding:40px 18px;}
  .hp-section-head--row{flex-direction:column;align-items:flex-start;gap:10px;}
  .hp-hero-stats{gap:32px;margin-top:40px;}
  .hp-cta-band{padding:28px 22px;flex-direction:column;align-items:flex-start;}
}
@media (max-width:640px){
  .site-nav-inner{padding:10px 12px;gap:8px;}
  .site-brand{gap:9px;flex:1 1 auto;overflow:hidden;}
  .site-brand-text{min-width:0;}
  .site-brand-text b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .site-nav .site-logo{width:34px;height:34px;border-radius:10px;}
  /* 小窗顶栏操作区按钮转图标态：font-size:0 隐藏文字（含裸文本节点），图标自带尺寸不受影响 */
  .site-actions .toolbar-btn{font-size:0;gap:0;width:38px;height:38px;padding:0;justify-content:center;}
  .site-actions{flex:0 0 auto;gap:6px;}
  .hp-hero-title{font-size:27px;}
  .hp-hero-sub{font-size:14.5px;}
  .hp-btn{height:44px;padding:0 20px;font-size:13.5px;}
  .hp-rec-grid,.hp-community-grid{grid-template-columns:1fr;}
  .hp-story{grid-template-columns:1fr;padding:22px 20px;gap:14px;}
  .hp-story-icon{width:50px;height:50px;border-radius:15px;}
  .hp-flow-arrow{display:none;}
  .hp-flow{gap:8px;}
}