/* =========================================================
   quickql-new | components.css
   组件层：区段标题、亮点卡、能力卡、服务卡、技术面板、
   界面轮播、资讯网格、用户评价轮播、下载面板、数据带、
   更新日志、侧边栏组件、分页
   ========================================================= */

/* ---------- 区段标题 ---------- */
.qq-sec-head p { margin-bottom: 35px; }
.qq-sec-head__title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 50px;
}
.qq-sec-head__desc { margin-bottom: 35px; }

/* ---------- 产品亮点卡（首页） ---------- */
.qq-point {
  padding: 30px 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  transition: transform 0.3s;
  text-align: center;
}
.qq-point:hover { transform: translateY(-5px); }
.qq-point__icon {
  font-size: 40px;
  color: var(--qq-blue);
  margin-bottom: 20px;
}
.qq-point__title { margin-bottom: 0; }
.qq-point__desc { margin-bottom: 0; }

/* ---------- 核心能力卡 ---------- */
.qq-capability { display: flex; }
.qq-capability__icon span {
  position: relative;
  color: #fff;
  font-size: 30px;
  height: 67px;
  width: 67px;
  display: block;
  line-height: 67px;
  border-radius: 50%;
  text-align: center;
  background-image: linear-gradient(90deg, #e78ae9 0%, #926ef8 100%);
}
.qq-capability__body { padding-left: 19px; }
.qq-capability__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
  color: var(--qq-ink-2);
}
.qq-capability__desc { font-size: 15px; margin-bottom: 0; }

/* ---------- 适用人群卡 ---------- */
.qq-audience-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  text-align: center;
}
.qq-audience-card__icon { font-size: 50px; color: var(--qq-blue); margin-bottom: 20px; }
.qq-audience-card__title { margin-bottom: 0; }
.qq-audience-card__desc { margin-bottom: 0; }

/* ---------- 服务卡 ---------- */
.qq-service-card {
  background: #fff;
  padding: 84px 45px 56px;
  border: 1px solid transparent;
  border-radius: 7px;
  transition: .5s;
  text-align: center;
  margin-bottom: 30px;
}
.qq-service-card:hover { border: 1px solid #b8a2ff; }
.qq-service-card__icon { display: inline-block; position: relative; }
.qq-service-card__icon span {
  position: relative;
  color: #fff;
  font-size: 40px;
  height: 105px;
  width: 105px;
  display: block;
  line-height: 105px;
  border-radius: 50%;
  text-align: center;
  background: #e88cea;
  margin-bottom: 42px;
  transition: .5s;
}
.qq-service-card__icon::before {
  background-image: url("../images/deco-dots.png");
  content: "";
  width: 80px;
  height: 135px;
  position: absolute;
  right: -29px;
  top: -35px;
  z-index: 0;
  transition: .5s;
}
.qq-service-card--active .qq-service-card__icon span,
.qq-service-card:hover .qq-service-card__icon span { background: var(--qq-violet-soft); }
.qq-service-card--active .qq-service-card__icon::before,
.qq-service-card:hover .qq-service-card__icon::before { right: -32px; }
.qq-service-card__body h4 a {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 27px;
  display: inline-block;
}
.qq-service-card__body h4 a:hover { color: var(--qq-violet-soft); }
.qq-service-card__desc { margin-bottom: 0; }
.qq-service-card__list { text-align: left; margin-top: 15px; padding-left: 0; }
.qq-service-card__list li {
  padding: 5px 0;
  position: relative;
  padding-left: 25px;
}
.qq-service-card__list li::before {
  content: "✓";
  color: #28a745;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* ---------- 技术优势面板 ---------- */
.qq-tech {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.qq-tech__title { color: #fff; }
.qq-tech__desc { color: #fff; }
.qq-tech__list li { margin-bottom: 10px; font-size: 16px; color: #fff; }
.qq-tech__list i { color: var(--qq-green); margin-right: 10px; }
.qq-tech__media img { max-width: 100%; height: auto; }

/* ---------- 界面展示轮播 ---------- */
.qq-showcase { overflow: hidden; position: relative; z-index: 0; }
.qq-showcase__slider.owl-loaded {
  overflow: hidden;
  position: relative;
  right: -14%;
}
.qq-showcase__slider .owl-stage-outer { overflow: visible; }
.qq-showcase__slider .owl-item img { display: block; width: 100%; }
.qq-showcase__info { position: relative; left: 58%; margin-top: 72px; }
.qq-showcase__title {
  color: var(--qq-ink);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
  padding-right: 30px;
}
.qq-showcase__info p { margin-bottom: 50px; padding-right: 224px; }
.qq-showcase__points i { color: var(--qq-blue); margin-right: 10px; }

/* ---------- 资讯网格（最新资讯） ---------- */
.qq-news { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.qq-news__grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; }
.qq-news__card {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  overflow: hidden;
}
.qq-news__cover { height: 12rem; background-size: cover; background-position: center; }
.qq-news__body { padding: 1.5rem; }
.qq-news__title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 1rem; }
.qq-news__title a { color: #1f2937; }
.qq-news__title a:hover { color: #2563eb; }
.qq-news__excerpt {
  color: #4b5563;
  margin-bottom: 1.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 16px;
  line-height: 30px;
}
.qq-news__date { font-size: 0.875rem; line-height: 1.25rem; color: #6b7280; }

/* ---------- 用户评价轮播 ---------- */
.qq-reviews-wrap { padding: 0 134px; }
.qq-testimonial {
  position: relative;
  margin-left: 15px;
  margin-right: 15px;
  box-shadow: 0px 0px 9px 0px rgba(131, 93, 248, 0.07);
  background: #ffff;
  padding: 55px 34px 55px 44px;
  margin-bottom: 100px;
}
.qq-testimonial__avatar { margin-bottom: 20px; }
.qq-testimonial__name {
  font-size: 20px;
  color: #712fda;
  margin-bottom: 0;
}
.qq-testimonial__name:hover { color: var(--qq-violet); }
.qq-testimonial__name a:hover { color: var(--qq-violet); }
.qq-testimonial__text { font-size: 16px; }
.qq-testimonials__slider .slick-list { margin-left: -15px; margin-right: -15px; }
.qq-testimonials__slider .slick-dots {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.qq-testimonials__slider .slick-dots li { display: inline-block; }
.qq-testimonials__slider .slick-dots button {
  text-indent: -100000px;
  height: 10px;
  width: 10px;
  border: 0;
  padding: 0;
  margin-right: 8px;
  cursor: pointer;
  border-radius: 50%;
  background: #f9d8e0;
}
.qq-testimonials__slider .slick-dots .slick-active button {
  background: #ec5252;
  height: 16px;
  width: 16px;
  padding-top: 2px;
}

/* ---------- 常见问题（首页版） ---------- */
.qq-faq__item {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.qq-faq__question { color: #333; margin-bottom: 10px; }
.qq-faq__question i { color: var(--qq-blue); margin-right: 10px; }
.qq-faq__answer { margin-bottom: 0; }

/* ---------- 下载面板（渐变大块） ---------- */
.qq-download {
  /* 原站 -webkit-linear-gradient(0deg) 旧语法 = 从左到右，现代语法等价 90deg */
  background-image: linear-gradient(90deg, #6c19f6 0%, #f9218d 100%);
  position: relative;
  padding-top: 150px;
  padding-bottom: 150px;
}
.qq-download__media { position: relative; right: -88px; }
.qq-download__media img { width: 100%; }
.qq-download__title { color: #fff; margin-bottom: 35px; font-weight: 600; }
.qq-download__body p { color: #fff; padding-right: 52px; padding-bottom: 26px; }
.qq-download__features p { margin-bottom: 8px; }
.qq-download__features i { color: var(--qq-blue); margin-right: 10px; }
.qq-download__btns .qq-download__btn:first-child { padding-right: 15px; }
.qq-download__links a { color: var(--qq-blue); margin: 0 5px; }
.qq-download__deco--top { position: absolute; top: 100px; left: 125px; }
.qq-download__deco--left { position: absolute; left: 0; bottom: 0; }
.qq-download__deco--heartbeat { animation: qq-heartbeat 1s infinite alternate; }

/* ---------- 数据统计带 ---------- */
.qq-stat { text-align: center; margin-bottom: 30px; }
.qq-stat__num {
  font-size: 60px;
  font-weight: 200;
  color: var(--qq-style2-purple);
  line-height: 42px;
  margin-bottom: 21px;
  display: block;
}
.qq-stat__label { font-size: 18px; color: var(--qq-ink-3); font-weight: 400; margin-bottom: 0; }
.qq-stat__desc { font-size: 18px; color: var(--qq-ink-3); margin-top: 5px; }

/* 盒式统计（软件功能页） */
.qq-stat--boxed { text-align: center; padding: 30px; background: #f8f9fa; border-radius: 15px; transition: transform 0.3s ease; }
.qq-stat--boxed:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); }
.qq-stat--boxed .qq-stat__num {
  font-size: 48px;
  font-weight: 700;
  color: #2575fc;
  line-height: 1.5;
  margin-bottom: 10px;
  display: block;
}

/* ---------- 更新日志 ---------- */
.qq-update {
  background: white;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 30px;
}
.qq-update__title { margin-bottom: 0; }
.qq-update__date { color: #666; font-size: 14px; margin-bottom: 15px; }
.qq-update__list { padding-left: 20px; }
.qq-update__list li { margin-bottom: 8px; color: #555; }

/* ---------- 侧边栏 ---------- */
.qq-widget { background: var(--qq-surface-soft); padding: 30px; margin-bottom: 30px; }
.qq-widget__title { font-size: 20px; margin-bottom: 40px; }
.qq-widget__title::after {
  content: "";
  display: block;
  padding-top: 15px;
  border-bottom: 1px solid var(--qq-line-soft);
}
.qq-widget--search .qq-widget-search__input {
  height: 50px;
  border-color: var(--qq-line-soft);
  font-size: 13px;
  color: #999999;
  padding-left: 20px;
  border-radius: 0;
  border-right: 0;
}
.qq-widget--search .qq-widget-search__input::placeholder { color: #999999; }
.qq-widget--search .qq-widget-search__input:focus { border-color: var(--qq-line-soft); outline: 0; box-shadow: none; }
.qq-widget--search .qq-widget-search__btn {
  background: var(--qq-violet);
  border-left: 0;
  border: 1px solid var(--qq-line-soft);
  padding: 4px 15px;
  border-left: 0;
  cursor: pointer;
}
.qq-widget--search .qq-widget-search__btn i { color: #fff; }
.qq-widget__catlist li {
  border-bottom: 1px solid var(--qq-line-soft);
  transition: all 0.3s ease 0s;
  padding-bottom: 12px;
}
.qq-widget__catlist li a { font-size: 14px; line-height: 20px; color: #888888; }
.qq-widget__catlist li a p { margin-bottom: 0px; }
.qq-widget__catlist li + li { padding-top: 15px; }
.qq-widget__catlist li:last-child { border-bottom: 0; }
.qq-widget--popular .qq-widget-post + .qq-widget-post { margin-top: 20px; }
.qq-widget-post { display: flex; }
.qq-widget-post__body {
  justify-content: center;
  align-self: center;
  padding-left: 20px;
}
.qq-widget-post__title {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 6px;
  transition: all 0.3s linear;
  font-weight: 500;
}
.qq-widget-post__date { font-size: 14px; line-height: 21px; margin-bottom: 0px; }
.qq-widget--newsletter .qq-widget-search__input {
  height: 50px;
  border-color: var(--qq-line-soft);
  font-size: 13px;
  color: #999999;
  padding-left: 20px;
  border-radius: 0;
}
.qq-widget--newsletter .qq-widget-search__input:focus { border-color: var(--qq-line-soft); outline: 0; box-shadow: none; }
.qq-widget--newsletter .qq-widget-search__btn {
  background: #fff;
  border-left: 0;
  border: 1px solid var(--qq-line-soft);
  padding: 4px 15px;
}
.qq-widget--newsletter .qq-widget-search__btn i, 
.qq-widget--newsletter .qq-widget-search__btn span { font-size: 14px; color: #fff; }
.qq-widget__submit { margin-top: 0px; }

/* ---------- 文章列表卡（使用指南） ---------- */
.qq-article-card { margin-bottom: 50px; }
.qq-article-card__media { position: relative; }
.qq-article-card__img { width: 100%; }
.qq-article-card__date {
  position: absolute;
  bottom: -10px;
  left: 10px;
  display: block;
  color: #fff;
  background-color: var(--qq-violet);
  padding: 8px 15px;
  border-radius: 5px;
}
.qq-article-card__date p { font-size: 18px; margin-bottom: 0; color: #fff; }
.qq-article-card__body {
  padding: 30px 0 20px 10px;
  box-shadow: 0px 10px 20px 0px rgba(221, 221, 221, 0.3);
}
.qq-article-card__body a { color: #ff8b23; }
.qq-article-card__body a:hover { color: #ff5c97; }
.qq-article-card__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.qq-article-card__desc { margin-bottom: 30px; }

/* ---------- 分页（原站 page-num 结构，无样式即为原效果） ---------- */
.qq-pagination { margin-top: 80px; }

/* ---------- 装饰图形（核心功能区块） ---------- */
.qq-capabilities { position: relative; }
.qq-capabilities__deco { position: absolute; left: 30px; top: 100px; }
.qq-capabilities__deco img { max-width: 80%; }
.qq-capabilities__deco--offset { top: 300px; }