/* AsoRank 首页视觉打磨：Hero（商店图标按钮 + 橘色动态标题）+ 业务卡片区（图标/文字/按钮协调） */
:root{
  --hp-orange:#ff5f38;
  --hp-amber:#ff9a3d;
  --hp-purple:#6153ff;
  --hp-violet:#7977ee;
}

/* ===================== Hero ===================== */
.cropium-hero-section .hero-title{
  font-size:clamp(28px,4.2vw,42px);
  line-height:1.4;
  margin-bottom:30px;
}
/* 橘色强调字：暖色渐变流动，比静态纯色更突出 */
.cropium-hero-section .hero-title .hl{
  font-size:1.1em;
  font-weight:800;
  background:linear-gradient(90deg,#ff5f38,#ff9a3d,#ffd23d,#ff9a3d,#ff5f38);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:hpHlFlow 5s linear infinite;
}
@keyframes hpHlFlow{
  0%{background-position:0% 0}
  100%{background-position:-250% 0}
}
@media (prefers-reduced-motion: reduce){
  .cropium-hero-section .hero-title .hl{animation:none;}
}

/* 服务亮点：两列自适应排布 */
.cropium-hero-section .hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:14px 30px;
  margin:0 0 6px;
  padding:0;
  list-style:none;
  max-width:560px;
}
.cropium-hero-section .hero-points .pt{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:17px;
  font-weight:500;
  color:#5a5f7d;
  white-space:nowrap;
}
.cropium-hero-section .hero-points .pt i{
  color:#fba920;
  font-size:16px;
}

/* 商店按钮：渐变 + 商店 logo 图标 */
/* 提示文案：支持以下三大商店优化 */
/* 提示文案：与上方亮点列表拉开区块间距，下方紧贴按钮（它是按钮组的说明） */
.cropium-hero-section .cropium-hero-slider .single-slide-content .hero-store-note{
  margin:28px 0 10px;
  font-size:13.5px;
  color:#8a8fa8;
  letter-spacing:.2px;
  text-align:center;
}
/* 按钮组的上边距改由文案的 margin-bottom 提供（模板原 margin-top:40px 清零） */
.cropium-hero-section .cropium-hero-slider .single-slide-content .hero-button{
  margin-top:0;
}
.cropium-hero-section .hero-button{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
}
.cropium-hero-section .hero-button .template-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1 1 0;
  min-width:0;
  gap:9px;
  padding:13px 16px;
  border-radius:12px;
  font-size:14.5px;
  font-weight:600;
  white-space:nowrap;
  background:linear-gradient(135deg,#6153ff,#7977ee);
  box-shadow:0 10px 22px rgba(97,83,255,.28);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.cropium-hero-section .hero-button .template-button i{
  margin-left:0;
  font-size:11px;
  opacity:.9;
}
.cropium-hero-section .hero-button .template-button:hover{
  color:#fff;
  border-color:transparent;
  transform:translateY(-3px);
  background:linear-gradient(135deg,#4f43e8,#6153ff);
  box-shadow:0 14px 28px rgba(97,83,255,.4);
}
.cropium-hero-section .hero-button .store-ic{
  width:19px;
  height:19px;
  flex:none;
}

/* ===================== 业务卡片区 ===================== */
.feature-home-2 .single-feature-item{
  padding:34px 28px 30px;
  border-radius:16px;
  overflow:hidden;
}
.feature-home-2 .single-feature-item:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(97,83,255,.14);
}

/* 新图标容器：大尺寸渐变底 + 白色线性 SVG */
.feature-home-2 .single-feature-item .feat-ic{
  width:68px;
  height:68px;
  border-radius:18px;
  border:none;
  margin:0 0 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--hp-bg,#7977ee);
  box-shadow:0 12px 24px var(--hp-sh,rgba(121,119,238,.32));
  transition:transform .35s ease;
}
.feature-home-2 .single-feature-item .feat-ic svg{
  width:34px;
  height:34px;
  display:block;
}
.feature-home-2 .single-feature-item:hover .feat-ic{
  transform:translateY(-4px) rotate(-3deg) scale(1.06);
}
.feature-home-2 .single-feature-item .feat-ic.blue-icon{
  --hp-bg:linear-gradient(135deg,#7977ee,#a5a8ff);
  --hp-sh:rgba(121,119,238,.32);
}
.feature-home-2 .single-feature-item .feat-ic.yellow-icon{
  --hp-bg:linear-gradient(135deg,#fba920,#ffcf67);
  --hp-sh:rgba(251,169,32,.32);
}
.feature-home-2 .single-feature-item .feat-ic.red-icon{
  --hp-bg:linear-gradient(135deg,#f4557e,#ff93b4);
  --hp-sh:rgba(244,85,126,.3);
}
.feature-home-2 .single-feature-item .feat-ic.paste-icon{
  --hp-bg:linear-gradient(135deg,#4cc5e4,#8ce0f5);
  --hp-sh:rgba(76,197,228,.3);
}
.feature-home-2 .single-feature-item .feat-ic.purple-icon{
  --hp-bg:linear-gradient(135deg,#6153ff,#a78bfa);
  --hp-sh:rgba(97,83,255,.32);
}
.feature-home-2 .single-feature-item .feat-ic.green-icon{
  --hp-bg:linear-gradient(135deg,#22c55e,#6ee7b7);
  --hp-sh:rgba(34,197,94,.3);
}

.feature-home-2 .single-feature-item .title{
  font-size:20px;
  font-weight:700;
  color:#22254a;
  margin-bottom:0;
}

/* 亮点列表：统一节奏与缩进 */
.feature-home-2 .single-feature-item .feat-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
}
.feature-home-2 .single-feature-item .feat-list li{
  position:relative;
  padding-left:20px;
  margin-bottom:12px;
  font-size:14.5px;
  line-height:1.65;
  color:#5a5f7d;
}
.feature-home-2 .single-feature-item .feat-list li:last-child{margin-bottom:0;}
.feature-home-2 .single-feature-item .feat-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:9px;
  width:7px;
  height:7px;
  border-radius:2px;
  transform:rotate(45deg);
  background:linear-gradient(135deg,#ff5f38,#ff9a3d);
}

/* 卖点强调：橘色 pill，替代突兀的纯红字 */
.feature-home-2 .single-feature-item .feat-highlight{
  display:inline-block;
  margin-top:16px;
  padding:8px 15px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  color:#f2571f;
  text-transform:capitalize;
  background:linear-gradient(135deg,rgba(255,95,56,.1),rgba(255,154,61,.16));
  border:1px solid rgba(255,95,56,.28);
  border-radius:999px;
}
.feature-home-2 .single-feature-item .feat-highlight::before{
  content:"✦";
  margin-right:7px;
  font-size:12px;
}

/* More Details 按钮：统一规格、hover 上浮 + 箭头位移 */
.feature-home-2 .single-feature-item .footer_btn{
  width:100%;
  max-width:230px;
  height:50px;
  line-height:normal;
  font-family:inherit;
  font-size:16.5px;
  font-weight:600;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:26px;
  border-radius:25px;
  background:linear-gradient(135deg,#ff5f38,#ff9a3d);
  box-shadow:0 10px 24px rgba(255,95,56,.28);
  transition:transform .3s ease,box-shadow .3s ease;
}
.feature-home-2 .single-feature-item .footer_btn i{
  font-size:15px;
  transition:transform .3s ease;
}
.feature-home-2 .single-feature-item .footer_btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(255,95,56,.42);
  color:#fff;
}
.feature-home-2 .single-feature-item .footer_btn:hover i{
  transform:translateX(4px);
}

/* About 区列表：品牌橘强调 + 正文灰 */
.cropium-about-section .hp-strong{font-weight:600;}
.cropium-about-section p > i.fa-check-circle{color:#22c55e;}

/* 中屏及以下：三列布局退化为单列，中间的视频装饰块不再有意义，隐藏以免留下大空白 */
@media (max-width:991px){
  .cropium-strategy-section .strategy-video-part{display:none;}
}

/* 移动端微调 */
@media (max-width:767px){
  .cropium-hero-section .hero-points .pt{font-size:15.5px;}
  /* hero 商店按钮：一排等分铺满，隐藏尾部箭头，紧凑化 */
  .cropium-hero-section .hero-button{gap:8px;}
  .cropium-hero-section .hero-button .template-button{
    flex:1 1 0;
    min-width:0;
    padding:11px 4px;
    font-size:13px;
    justify-content:center;
    white-space:nowrap;
  }
  .cropium-hero-section .hero-button .template-button i{display:none;}
  .cropium-hero-section .hero-button .store-ic{width:15px;height:15px;}
  .feature-home-2 .single-feature-item .feat-ic{width:60px;height:60px;border-radius:16px;}
  .feature-home-2 .single-feature-item .feat-ic svg{width:30px;height:30px;}
  .feature-home-2 .single-feature-item .footer_btn{max-width:none;}
}
/* 超窄屏（<360px）放不下时退回两行 */
@media (max-width:359px){
  .cropium-hero-section .hero-button{flex-wrap:wrap;gap:8px;}
  .cropium-hero-section .hero-button .template-button{flex:1 1 42%;}
}