/* ============================================================
   hhlsq.com — index.css 首页专属样式（研学极简 / 藏蓝+浅灰+白）
   布局指纹：全屏沉浸 Banner + 文字动画 + 悬浮错位快速入口
   ============================================================ */

/* ---------- 1. 全屏 Banner ---------- */
.home-hero{
  position:relative; min-height:calc(100vh - var(--topbar-h) - var(--header-h));
  display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(160deg,var(--navy-900),var(--navy-700) 70%,var(--navy-600));
}
.home-hero__bg{ position:absolute; inset:0; }
.home-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.34; filter:saturate(.86); }
.home-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 30% 30%, rgba(18,38,63,.25), rgba(18,38,63,.78) 78%);
}
.home-hero__inner{ position:relative; z-index:2; padding:70px 24px; color:#fff; max-width:880px; margin:0 auto 0 0; }
.home-hero__eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:13.5px; letter-spacing:.2em; color:var(--gold);
  border:1px solid rgba(176,141,74,.4); border-radius:var(--radius-pill);
  padding:7px 16px; margin-bottom:26px;
}
.home-hero__title{
  font-size:clamp(34px,5.6vw,64px); font-weight:700; line-height:1.18;
  color:#fff; letter-spacing:-.01em; margin-bottom:22px;
}
.home-hero__title em{ font-style:normal; color:var(--gold); }
.home-hero__lead{
  font-size:clamp(15.5px,1.5vw,18px); line-height:1.9; color:rgba(232,238,245,.88);
  max-width:620px; margin-bottom:34px;
}
.home-hero__actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.home-hero__ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.home-hero__ghost:hover{ background:#fff; color:var(--navy-700); }
.home-hero__hotline{ font-size:14px; color:rgba(232,238,245,.72); }
.home-hero__hotline a{ color:#fff; font-weight:600; }
.home-hero__hotline a:hover{ color:var(--gold); }

/* 文字动画：逐行上浮入场 */
.home-hero__anim{ opacity:0; transform:translateY(26px); animation:heroLine .8s cubic-bezier(.22,.61,.36,1) forwards; }
.hd-1{ animation-delay:.1s; }
.hd-2{ animation-delay:.25s; }
.hd-3{ animation-delay:.4s; }
.hd-4{ animation-delay:.55s; }
.hd-5{ animation-delay:.7s; }
@keyframes heroLine{ to{ opacity:1; transform:none; } }

/* 滚动指示 */
.home-hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:26px; height:44px; border:1.6px solid rgba(255,255,255,.5); border-radius:14px; z-index:2;
}
.home-hero__scroll span{
  position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px;
  background:var(--gold); transform:translateX(-50%);
  animation:heroScroll 1.8s ease-in-out infinite;
}
@keyframes heroScroll{ 0%{ opacity:0; top:8px; } 35%{ opacity:1; } 100%{ opacity:0; top:24px; } }

/* ---------- 2. 快速入口（悬浮错位卡片） ---------- */
.home-quick{ padding-top:0; }
.quick-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  transform:translateY(-56px); position:relative; z-index:5;
}
.quick-card{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:30px 26px 26px; position:relative; display:block;
  transition:transform .32s ease, box-shadow .32s ease;
}
.quick-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.quick-card--a{ transform:translateY(0) rotate(-.6deg); }
.quick-card--b{ transform:translateY(22px) rotate(.5deg); }
.quick-card--c{ transform:translateY(6px) rotate(-.3deg); }
.quick-card--d{ transform:translateY(28px) rotate(.7deg); }
.quick-card:hover{ transform:translateY(-4px) rotate(0); }
.quick-card__num{
  position:absolute; top:-14px; right:18px; font-size:44px; font-weight:700;
  color:transparent; -webkit-text-stroke:1.4px var(--gray-300); line-height:1;
}
.quick-card:hover .quick-card__num{ -webkit-text-stroke-color:var(--gold); }
.quick-card__title{ font-size:20px; margin-bottom:8px; color:var(--navy-900); }
.quick-card__text{ font-size:13.5px; color:var(--gray-600); margin-bottom:14px; }
.quick-card__more{ font-size:13.5px; font-weight:600; color:var(--navy-600); }
.quick-card:hover .quick-card__more{ color:var(--gold); }

/* ---------- 3. 核心优势 ---------- */
.adv-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin-bottom:52px; text-align:center;
}
.adv-stat{ padding:10px 0; position:relative; }
.adv-stat + .adv-stat::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:44px; background:var(--gray-200);
}
.adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.adv-card{ padding:28px 26px; }
.adv-card:nth-child(even){ transform:translateY(18px); }
.adv-card:hover{ transform:translateY(6px); }
.adv-card__icon{
  width:34px; height:34px; color:var(--navy-600); margin-bottom:16px;
  stroke-width:1.4;
}
.adv-card:hover .adv-card__icon{ color:var(--gold); }

/* ---------- 4. 建站类型 ---------- */
.types-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.type-card{
  background:var(--gray-100); border:1px solid transparent; border-radius:var(--radius-lg);
  padding:26px 24px; display:block; position:relative; overflow:hidden;
  transition:all .3s ease;
}
.type-card:hover{ background:#fff; border-color:var(--gray-200); box-shadow:var(--shadow-md); transform:translateY(-5px); }
.type-card__icon{ width:30px; height:30px; color:var(--navy-600); margin-bottom:14px; stroke-width:1.4; }
.type-card:hover .type-card__icon{ color:var(--gold); }
.type-card h3{ font-size:17.5px; margin-bottom:8px; }
.type-card p{ font-size:13.5px; color:var(--gray-600); margin:0; }
.type-card::after{
  content:""; position:absolute; right:-30px; bottom:-30px; width:90px; height:90px;
  border-radius:50%; background:var(--blue-soft); opacity:0; transition:opacity .3s ease;
}
.type-card:hover::after{ opacity:1; }

/* ---------- 5. 项目案例 ---------- */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.case-card{ background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.case-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-6px); }
.case-card--mid{ transform:translateY(22px); }
.case-card--mid:hover{ transform:translateY(16px); }
.case-card__media{ display:block; overflow:hidden; aspect-ratio:16/9; }
.case-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.case-card:hover .case-card__media img{ transform:scale(1.05); }
.case-card__body{ padding:22px 22px 26px; }
.case-card__body .tag{ margin-bottom:12px; }
.case-card__body .card-title{ font-size:18px; }
.case-more{ text-align:center; margin-top:clamp(40px,5vw,56px); }

/* ---------- 6. 服务流程 ---------- */
.flow-rail{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  position:relative;
}
.flow-rail::before{
  content:""; position:absolute; top:34px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,var(--gold) 0 18%,var(--gray-300) 18% 82%,var(--gold) 82%);
}
.flow-step{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:26px 22px; text-align:center; position:relative; transition:all .3s ease; }
.flow-step:hover{ box-shadow:var(--shadow-md); transform:translateY(-6px); }
.flow-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:66px; height:66px; border-radius:50%; background:var(--navy-700); color:var(--gold);
  font-size:22px; font-weight:700; margin-bottom:16px;
  border:5px solid #fff; box-shadow:var(--shadow-sm); position:relative; z-index:1;
}
.flow-step h3{ font-size:17px; margin-bottom:8px; }
.flow-step p{ font-size:13.5px; color:var(--gray-600); margin:0; }
.flow-cta{ text-align:center; margin-top:44px; }

/* ---------- 7. 技术亮点（深蓝区块） ---------- */
.tech-split{ display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; }
.tech-media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; }
.tech-item{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid rgba(232,238,245,.14); }
.tech-item:last-child{ border-bottom:none; }
.tech-item__icon{ width:30px; height:30px; color:var(--gold); margin-top:3px; }
.tech-item h3{ color:#fff; font-size:16.5px; margin-bottom:6px; }
.tech-item p{ color:rgba(232,238,245,.72); font-size:14px; margin:0; }
.tech-more{ text-align:center; margin-top:48px; }

/* ---------- 8. 增值服务 ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.value-card{
  background:var(--gray-100); border-radius:var(--radius-lg); padding:28px 22px;
  text-align:center; transition:all .3s ease; position:relative;
}
.value-card:nth-child(even){ transform:translateY(20px); }
.value-card:hover{ background:#fff; box-shadow:var(--shadow-md); transform:translateY(8px); }
.value-card__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:16px; background:var(--navy-700); color:#fff;
  margin-bottom:16px;
}
.value-card:hover .value-card__ico{ background:var(--gold); }
.value-card h3{ font-size:16.5px; margin-bottom:10px; }
.value-card p{ font-size:13.5px; color:var(--gray-600); margin:0; }
.value-cta{ text-align:center; margin-top:44px; font-size:15px; color:var(--gray-600); }
.value-cta a{ font-weight:600; color:var(--navy-700); }

/* ---------- 9. 公司介绍 ---------- */
.about-split{ display:grid; grid-template-columns:1.06fr 1fr; gap:48px; align-items:center; }
.about-media{ position:relative; }
.about-media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-md); width:100%; }
.about-media::after{
  content:"本地团队 · 随叫随到"; position:absolute; left:-14px; bottom:26px;
  background:var(--navy-900); color:var(--gold); font-size:12.5px; letter-spacing:.12em;
  padding:10px 16px; border-radius:var(--radius-md); transform:rotate(-3deg);
  box-shadow:var(--shadow-md);
}
.about-text{ color:var(--gray-600); font-size:15px; margin-bottom:24px; }
.about-points li{
  display:flex; align-items:baseline; gap:14px; padding:10px 0;
  border-bottom:1px dashed var(--gray-300); font-size:14.5px; color:var(--gray-700);
}
.about-points li:last-child{ border-bottom:none; }
.about-points span{ font-weight:700; color:var(--gold); font-size:13px; }
.about-actions{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

/* ---------- 10. 全站资讯（最新/日/周/月） ---------- */
.home-news{ background:var(--gray-100); }
.news-wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:start; }
.news-panel{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:26px 24px;
}
.news-panel__title{
  font-size:17px; display:flex; align-items:center; gap:10px; margin-bottom:18px;
  padding-bottom:12px; border-bottom:2px solid var(--navy-700); position:relative;
}
.news-panel__title::after{
  content:""; position:absolute; left:0; bottom:-2px; width:52px; height:2px; background:var(--gold);
}
.news-list{ display:flex; flex-direction:column; gap:14px; }
.news-item--row{
  display:grid; grid-template-columns:128px 1fr; gap:16px;
  background:var(--gray-50); border-radius:var(--radius-md); padding:12px;
  transition:all .3s ease; border:1px solid transparent;
}
.news-item--row:hover{ background:#fff; border-color:var(--gray-200); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.news-item__thumb{ display:block; aspect-ratio:16/10; border-radius:var(--radius-sm); overflow:hidden; }
.news-item__thumb img{ width:100%; height:100%; object-fit:cover; }
.news-item__body{ display:block; min-width:0; }
.news-item__title{
  display:block; font-size:14.5px; font-weight:600; color:var(--navy-900);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:5px;
}
.news-item--row:hover .news-item__title{ color:var(--navy-600); }
.news-item__desc{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:12.5px; color:var(--gray-500); line-height:1.6; margin-bottom:6px;
}
.news-item__time{ font-size:12px; color:var(--gray-400); }

.news-side{ display:flex; flex-direction:column; gap:18px; }
.news-mini li a{
  display:flex; align-items:center; gap:12px; padding:9px 0;
  border-bottom:1px dashed var(--gray-200);
}
.news-mini li:last-child a{ border-bottom:none; }
.news-mini img{ width:64px; height:40px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.news-mini__body{ min-width:0; }
.news-mini__title{
  display:block; font-size:13px; font-weight:500; color:var(--gray-700);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.news-mini a:hover .news-mini__title{ color:var(--navy-600); }
.news-mini__time{ font-size:11.5px; color:var(--gray-400); }
.news-more{ text-align:center; margin-top:40px; }

/* ---------- 11. 留言板块 ---------- */
.msg-split{ display:grid; grid-template-columns:1fr 1.06fr; gap:48px; align-items:center; }
.msg-intro .sec-eyebrow{ color:var(--gold); }
.msg-intro .sec-title{ color:#fff; }
.msg-sub{ color:rgba(232,238,245,.75); font-size:15px; margin-bottom:24px; }
.msg-contact{ display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.msg-contact__item{ color:rgba(232,238,245,.9); }
.msg-contact__item:hover{ color:var(--gold); }
.msg-form__note{ font-size:12px; color:var(--gray-500); margin-top:12px; text-align:center; }

/* ---------- 12. CTA ---------- */
.home-cta{ padding-bottom:clamp(70px,8vw,110px); }
.cta-banner{
  background:linear-gradient(135deg,var(--navy-800),var(--navy-700) 55%,var(--navy-600));
  border-radius:28px; padding:clamp(44px,5vw,72px) clamp(24px,4vw,56px);
  text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
}
.cta-banner::before{
  content:""; position:absolute; right:-90px; top:-90px; width:280px; height:280px;
  border-radius:50%; border:1px dashed rgba(255,255,255,.22);
}
.cta-banner::after{
  content:""; position:absolute; left:-60px; bottom:-120px; width:220px; height:220px;
  border-radius:50%; border:1px dashed rgba(176,141,74,.4);
}
.cta-banner__inner{ position:relative; z-index:1; }
.cta-banner__title{ color:#fff; font-size:clamp(22px,3vw,32px); margin-bottom:12px; }
.cta-banner__sub{ color:rgba(232,238,245,.78); font-size:15px; margin-bottom:28px; }
.cta-banner__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- 响应式 ---------- */
@media (max-width: 992px){
  .quick-grid{ grid-template-columns:repeat(2,1fr); transform:translateY(-28px); }
  .quick-card--b,.quick-card--d{ transform:translateY(0); }
  .adv-stats{ grid-template-columns:repeat(2,1fr); }
  .adv-grid{ grid-template-columns:repeat(2,1fr); }
  .types-grid{ grid-template-columns:repeat(2,1fr); }
  .case-grid{ grid-template-columns:1fr; }
  .case-card--mid{ transform:none; }
  .flow-rail{ grid-template-columns:repeat(2,1fr); }
  .tech-split,.about-split,.msg-split{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .news-wrap{ grid-template-columns:1fr; }
  .home-hero__inner{ margin:0 auto; }
}
@media (max-width: 640px){
  .quick-grid{ grid-template-columns:1fr; }
  .adv-stats{ grid-template-columns:1fr 1fr; gap:14px; }
  .adv-stat + .adv-stat::before{ display:none; }
  .adv-grid,.types-grid,.case-grid,.flow-rail,.value-grid{ grid-template-columns:1fr; }
  .news-item--row{ grid-template-columns:96px 1fr; }
  .home-hero__actions .btn{ width:100%; }
}