/* ============================================================
   lnwmold.com —— 首页专属样式（儿童可爱风 · 独立原创布局）
   文件：css/index.css  依赖：css/base.css
   布局思路：全屏 Banner + 跑马灯 + 数字条 + 不规则网格叠加优势区
             + 磁贴服务区 + 行业宫格 + 五步流程 + 三档套餐
             + 错位案例 + 定制vs模板 + 区域地图 + 资讯列表 + CTA
   ============================================================ */

/* ---------- ① 全屏 Banner ---------- */
.hero{
  position:relative;
  min-height:calc(100vh - 112px);
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:-6% 0 auto 0;
  width:100%; height:115%;
  object-fit:cover;
  transform:scale(1.06);
  filter:saturate(.92);
  transition:transform .1s linear;
  z-index:0;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(255,246,220,.96) 0%, rgba(255,246,220,.86) 34%, rgba(255,246,220,.35) 62%, rgba(255,246,220,.12) 100%),
    linear-gradient(0deg, var(--cream) 0%, transparent 26%);
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center; gap:30px;
  padding-top:70px; padding-bottom:90px;
}
.hero-tag{ animation:popIn .6s .1s both; }
.hero-title{
  margin:18px 0 16px;
  letter-spacing:1px;
}
.hero-title .ht-char{
  display:inline-block;
  opacity:0;
  animation:charUp .55s ease forwards;
}
.hero-title .ht-space{ display:inline-block; width:.5em; }
@keyframes charUp{ from{ opacity:0; transform:translateY(22px) rotate(3deg); } to{ opacity:1; transform:none; } }
@keyframes popIn{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:none; } }
.hero-sub{
  max-width:560px; font-size:17px; color:var(--body);
  background:rgba(255,255,255,.72); border:2px dashed var(--pink-mid);
  border-radius:var(--r-m); padding:16px 20px;
}
.hero-btns{ display:flex; gap:14px; margin:24px 0 16px; flex-wrap:wrap; }
.hero-note{ font-size:14px; font-weight:700; color:var(--yellow-deep); }
.hero-note::before{ content:"☏ "; } /* 可爱感提示符 */
.hero-side{ position:relative; height:360px; }
.float-chip{
  position:absolute;
  background:var(--white); border:2px dashed var(--yellow);
  border-radius:var(--r-full);
  padding:10px 18px; font-size:14px; font-weight:700; color:var(--ink);
  box-shadow:var(--shadow-s);
  animation:floatY 4s ease-in-out infinite;
}
.float-chip .chip-num{ color:var(--pink-deep); font-size:20px; margin-right:4px; }
.chip-1{ top:26px; right:8%; animation-delay:.2s; }
.chip-2{ top:130px; right:34%; animation-delay:1.2s; border-color:var(--pink-mid); }
.chip-3{ top:230px; right:4%; animation-delay:2.1s; border-color:var(--green-mid); }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.chip-cloud{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.85);
}
.chip-cloud.c1{ width:90px; height:38px; top:60px; right:46%; border-radius:50px; }
.chip-cloud.c1::before,.chip-cloud.c1::after{ content:""; position:absolute; background:inherit; border-radius:50%; }
.chip-cloud.c1::before{ width:44px; height:44px; left:12px; top:-18px; }
.chip-cloud.c1::after{ width:34px; height:34px; right:10px; top:-12px; }
.chip-cloud.c2{ width:70px; height:30px; bottom:24px; right:20%; }
.chip-cloud.c2::before,.chip-cloud.c2::after{ content:""; position:absolute; background:inherit; border-radius:50%; }
.chip-cloud.c2::before{ width:36px; height:36px; left:8px; top:-14px; }
.chip-cloud.c2::after{ width:26px; height:26px; right:6px; top:-10px; }
.hero-scroll{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:3; width:44px; height:44px; border-radius:50%;
  background:var(--yellow-soft); color:var(--yellow-deep);
  display:flex; align-items:center; justify-content:center;
  animation:floatY 2.6s ease-in-out infinite;
}
.hero-scroll svg{ width:20px; height:20px; }

/* ---------- ② 跑马灯 ---------- */
.ticker{
  overflow:hidden; background:var(--pink-soft);
  border-top:2px dashed var(--pink-mid); border-bottom:2px dashed var(--pink-mid);
  padding:10px 0;
}
.ticker-track{
  display:flex; gap:22px; width:max-content;
  animation:tick 26s linear infinite;
  font-size:14px; font-weight:700; color:var(--pink-deep);
}
.ticker-track .tk-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--pink); box-shadow:0 0 0 3px rgba(242,123,168,.22);
}
@keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- ③ 数字条 ---------- */
.stats{ padding:56px 0 10px; }
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  background:var(--white); border:2px dashed var(--yellow-soft); border-radius:var(--r-l);
  padding:30px 26px; box-shadow:var(--shadow-s);
}
.stat-item{ text-align:center; position:relative; }
.stat-item + .stat-item::before{
  content:""; position:absolute; left:-9px; top:22%; height:56%;
  width:2px; background:var(--yellow-soft); border-radius:2px;
}
.stat-num{ font-size:38px; font-weight:800; color:var(--yellow-deep); line-height:1.1; }
.stat-num span{ font-size:18px; color:var(--pink-deep); }
.stat-item p{ margin:6px 0 0; font-size:14px; font-weight:600; }

/* ---------- ④ 核心优势（不规则网格叠加） ---------- */
.adv{ padding:70px 0 20px; }
.sec-head{ max-width:640px; margin:0 auto 42px; text-align:center; }
.sec-head h2{ margin:12px 0 10px; }
.sec-head p{ color:var(--body); font-size:15px; }
.adv-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "a1 a1 a2 a2"
    "a3 a4 a4 a5"
    "a3 a6 a6 a5";
  gap:20px;
}
.adv-card{
  background:var(--white); border-radius:var(--r-l);
  border:2px dashed transparent;
  padding:30px 26px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow:var(--shadow-s);
}
.adv-card:hover{ transform:translateY(-6px) rotate(-.4deg); border-color:var(--yellow); box-shadow:var(--shadow-m); }
.adv-1{ grid-area:a1; background:linear-gradient(135deg,#fff,#FFF6DC); }
.adv-2{ grid-area:a2; background:linear-gradient(135deg,#fff,#FFE4F0); }
.adv-3{ grid-area:a3; background:linear-gradient(135deg,#fff,#E9F7E9); }
.adv-4{ grid-area:a4; }
.adv-5{ grid-area:a5; background:linear-gradient(135deg,#fff,#FFF6DC); }
.adv-6{ grid-area:a6; background:linear-gradient(135deg,#fff,#FFE4F0); }
.adv-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:18px;
  background:var(--yellow-soft); color:var(--yellow-deep);
  margin-bottom:16px;
}
.adv-2 .adv-icon{ background:var(--pink-soft); color:var(--pink-deep); }
.adv-3 .adv-icon,.adv-4 .adv-icon{ background:var(--green-soft); color:var(--green-deep); }
.adv-5 .adv-icon{ background:var(--yellow-soft); color:var(--yellow-deep); }
.adv-6 .adv-icon{ background:var(--pink-soft); color:var(--pink-deep); }
.adv-icon svg{ width:26px; height:26px; }
.adv-card h3{ margin-bottom:10px; font-size:19px; }
.adv-card p{ font-size:14.5px; margin:0; }

/* ---------- ⑤ 服务磁贴 ---------- */
.services{ padding:70px 0 20px; }
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.svc-tile{
  background:var(--white); border-radius:var(--r-l); border:2px dashed transparent;
  padding:28px 26px; box-shadow:var(--shadow-s);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex; flex-direction:column; gap:8px;
}
.svc-tile:hover{ transform:translateY(-6px); border-color:var(--pink); box-shadow:var(--shadow-m); }
.svc-wide{ grid-column:span 1; }
.svc-y{ background:linear-gradient(135deg,#fff 0 60%, var(--yellow-soft)); }
.svc-p{ background:linear-gradient(135deg,#fff 0 60%, var(--pink-soft)); }
.svc-g{ background:linear-gradient(135deg,#fff 0 60%, var(--green-soft)); }
.svc-icon{
  width:50px; height:50px; border-radius:16px; display:inline-flex;
  align-items:center; justify-content:center;
  background:var(--yellow-soft); color:var(--yellow-deep); margin-bottom:6px;
}
.svc-p .svc-icon{ background:var(--pink-soft); color:var(--pink-deep); }
.svc-g .svc-icon{ background:var(--green-soft); color:var(--green-deep); }
.svc-icon svg{ width:24px; height:24px; }
.svc-tile h3{ font-size:18px; }
.svc-tile p{ font-size:14px; margin:0; }
.svc-tile b{ color:var(--pink-deep); font-size:13.5px; margin-top:auto; }

/* ---------- ⑥ 行业宫格 ---------- */
.indus{ padding:70px 0 20px; }
.indus-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.indus-cell{
  display:flex; align-items:center; gap:10px;
  background:var(--white); border-radius:var(--r-m);
  padding:16px 18px; font-weight:700; font-size:15px; color:var(--ink);
  border:2px dashed transparent; box-shadow:var(--shadow-s);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.indus-cell:hover{ transform:translateY(-4px) rotate(-.5deg); border-color:var(--yellow); background:var(--yellow-soft); }
.dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.dot-pink{ background:var(--pink); }
.dot-yellow{ background:var(--yellow); }
.dot-green{ background:var(--green); }
.indus-more{ text-align:center; margin:22px 0 0; }
.indus-more a{ color:var(--pink-deep); font-weight:700; font-size:15px; }
.indus-more a:hover{ text-decoration:underline; }

/* ---------- ⑦ 五步流程 ---------- */
.flow{ padding:70px 0 20px; }
.flow-line{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
  counter-reset:step;
}
.flow-line li{
  position:relative; background:var(--white); border-radius:var(--r-l);
  padding:26px 20px 22px; border:2px dashed transparent;
  box-shadow:var(--shadow-s); transition:transform .3s ease, border-color .3s ease;
}
.flow-line li:hover{ transform:translateY(-6px); border-color:var(--green); }
.flow-line li + li::before{
  content:""; position:absolute; top:44px; left:-18px; width:20px; height:2px;
  background:var(--yellow); border-top:2px dashed var(--yellow); z-index:1;
}
.flow-line b{
  display:inline-flex; width:42px; height:42px; border-radius:50%;
  align-items:center; justify-content:center;
  background:var(--green-soft); color:var(--green-deep);
  font-size:16px; margin-bottom:14px;
}
.flow-line li:nth-child(2) b{ background:var(--yellow-soft); color:var(--yellow-deep); }
.flow-line li:nth-child(3) b{ background:var(--pink-soft); color:var(--pink-deep); }
.flow-line li:nth-child(4) b{ background:var(--green-soft); color:var(--green-deep); }
.flow-line li:nth-child(5) b{ background:var(--yellow-soft); color:var(--yellow-deep); }
.flow-line h3{ font-size:17px; margin-bottom:8px; }
.flow-line p{ font-size:13.5px; margin:0; }
.flow-cta{ text-align:center; margin-top:30px; }

/* ---------- ⑧ 套餐三档 ---------- */
.pkg{ padding:70px 0 20px; }
.pkg-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.pkg-card{
  background:var(--white); border-radius:var(--r-l); border:2px dashed transparent;
  padding:34px 28px; display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--shadow-s); transition:transform .3s ease, box-shadow .3s ease;
}
.pkg-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); }
.pkg-hot{
  border:2px dashed var(--pink); background:linear-gradient(180deg,#fff,var(--pink-soft));
  transform:scale(1.04);
}
.pkg-hot:hover{ transform:scale(1.04) translateY(-6px); }
.pkg-name{ font-weight:800; font-size:19px; color:var(--ink); }
.pkg-name i{
  font-style:normal; font-size:12px; background:var(--pink); color:#fff;
  border-radius:var(--r-full); padding:3px 10px; margin-left:8px; vertical-align:2px;
}
.pkg-price{ font-size:15px; color:var(--body); }
.pkg-price b{ font-size:34px; color:var(--pink-deep); }
.pkg-card:nth-child(1) .pkg-price b{ color:var(--green-deep); }
.pkg-card:nth-child(3) .pkg-price b{ color:var(--yellow-deep); }
.pkg-card ul{ flex:1; }
.pkg-card ul li{
  position:relative; padding:8px 0 8px 26px; font-size:14px;
  border-bottom:1px dashed var(--yellow-soft);
}
.pkg-card ul li::before{
  content:""; position:absolute; left:4px; top:16px;
  width:8px; height:8px; border-radius:50%; background:var(--green);
}
.pkg-card ul li:last-child{ border-bottom:0; }
.pkg-note{ text-align:center; margin-top:26px; font-size:14px; }
.pkg-note a{ color:var(--pink-deep); font-weight:700; }

/* ---------- ⑨ 案例错位卡片 ---------- */
.cases{ padding:70px 0 20px; }
.case-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start;
}
.case-card{
  background:var(--white); border-radius:var(--r-l); overflow:hidden;
  border:2px dashed transparent; box-shadow:var(--shadow-s);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.case-card:hover{ transform:translateY(-6px); border-color:var(--pink-mid); box-shadow:var(--shadow-m); }
.case-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; }
.case-card:hover img{ transform:scale(1.04); }
.case-up{ margin-top:34px; }
.case-card h3{ font-size:16.5px; padding:16px 18px 6px; }
.case-card h3 a:hover{ color:var(--pink-deep); }
.case-card p{ font-size:13.5px; padding:0 18px 18px; margin:0; }
.cases-more{ text-align:center; margin-top:34px; }

/* ---------- ⑩ 定制 vs 模板 ---------- */
.vs{ padding:70px 0 20px; }
.vs-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
}
.vs-photo{ position:relative; }
.vs-photo img{
  border-radius:var(--r-xl);
  border:6px solid var(--white); box-shadow:var(--shadow-l);
  transform:rotate(-1.6deg);
}
.vs-sticker{
  position:absolute; right:-8px; top:-14px;
  background:var(--pink); color:#fff; font-weight:800; font-size:15px;
  padding:10px 18px; border-radius:14px;
  transform:rotate(6deg); box-shadow:var(--shadow-m);
}
.vs-text .tag{ margin-bottom:14px; }
.vs-text h2{ margin-bottom:20px; }
.vs-list li{
  position:relative; padding:10px 0 10px 30px; font-size:15px;
  border-bottom:2px dotted var(--yellow-soft);
}
.vs-list li::before{
  content:""; position:absolute; left:2px; top:17px;
  width:14px; height:14px; border-radius:50%;
  background:var(--green-soft);
}
.vs-list li:nth-child(even)::before{ background:var(--pink-soft); }
.vs-list b{ color:var(--ink); }
.vs-cta{ display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; }

/* ---------- ⑪ 区域 ---------- */
.region{ padding:70px 0 20px; }
.region-map{
  position:relative; max-width:760px; margin:0 auto;
  background:var(--white); border-radius:var(--r-xl);
  border:2px dashed var(--green-mid); padding:30px 30px 20px;
  box-shadow:var(--shadow-s); overflow:hidden;
}
.region-map svg{ position:absolute; inset:0; width:100%; height:100%; }
.rm-city{
  position:relative; z-index:1; display:inline-block;
  background:var(--green-soft); color:var(--green-deep);
  font-weight:800; font-size:15px;
  padding:10px 22px; border-radius:var(--r-full);
  margin:6px 8px; box-shadow:var(--shadow-s);
}
.rm-main{ background:var(--yellow); color:#fff; font-size:17px; padding:12px 30px; }
.region-cta{
  text-align:center; margin-top:26px; display:flex; align-items:center;
  justify-content:center; gap:16px; flex-wrap:wrap;
}
.region-cta p{ font-size:15px; font-weight:700; color:var(--ink); margin:0; }

/* ---------- ⑫ 资讯列表（含 CMS 循环输出的卡片与迷你条目） ---------- */
.news{ padding:70px 0 20px; }
.news .sec-head{ margin-bottom:34px; }
.news-card{
  background:var(--white); border-radius:var(--r-l); overflow:hidden;
  border:2px dashed transparent; box-shadow:var(--shadow-s);
  transition:transform .3s ease, border-color .3s ease;
  display:flex;
}
.news-card:hover{ transform:translateY(-5px); border-color:var(--yellow); }
.news-card-link{ display:flex; width:100%; }
.news-img{ width:42%; aspect-ratio:16/10; object-fit:cover; flex:none; }
.news-body{ padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.news-body h3{ font-size:18px; }
.news-card:hover .news-body h3{ color:var(--pink-deep); }
.news-body p{
  font-size:14px; margin:0; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-body time{ font-size:13px; color:var(--yellow-deep); font-weight:700; margin-top:auto; }
.news-mini{
  background:var(--white); border-radius:var(--r-m);
  border-left:6px solid var(--pink); box-shadow:var(--shadow-s);
  margin-top:14px; transition:transform .25s ease, border-color .25s ease;
}
.news-mini:nth-of-type(2){ border-left-color:var(--yellow); }
.news-mini:nth-of-type(3){ border-left-color:var(--green); }
.news-mini:hover{ transform:translateX(6px); }
.news-mini a{ display:flex; justify-content:space-between; gap:12px; padding:14px 18px; align-items:center; }
.mini-tit{ font-weight:700; font-size:14.5px; color:var(--ink); }
.news-mini:hover .mini-tit{ color:var(--pink-deep); }
.mini-meta{ font-size:12.5px; color:var(--yellow-deep); font-weight:700; white-space:nowrap; }
.news-more{ text-align:center; margin-top:26px; }
.news-more a{ color:var(--pink-deep); font-weight:700; }

/* ---------- ⑬ 底部 CTA ---------- */
.cta{
  position:relative; margin:80px 20px 0; overflow:hidden;
  border-radius:var(--r-xl);
}
.cta-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(240,120,168,.92) 0%, rgba(245,184,46,.86) 100%);
}
.cta-inner{
  position:relative; z-index:1; text-align:center;
  padding:70px 20px;
}
.cta-inner h2{ color:#fff; text-shadow:0 3px 10px rgba(180,60,100,.3); margin-bottom:14px; }
.cta-inner p{ color:#fff; font-size:16px; font-weight:600; margin-bottom:26px; }
.cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- 响应式 ---------- */
@media (max-width:1023.98px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-side{ display:none; }
  .hero{ min-height:640px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .stat-item + .stat-item::before{ display:none; }
  .adv-grid{ grid-template-columns:repeat(2,1fr); grid-template-areas:"a1 a2" "a3 a4" "a5 a6"; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .indus-grid{ grid-template-columns:repeat(3,1fr); }
  .flow-line{ grid-template-columns:repeat(2,1fr); }
  .flow-line li + li::before{ display:none; }
  .pkg-row{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .pkg-hot{ transform:none; }
  .pkg-hot:hover{ transform:translateY(-6px); }
  .case-row{ grid-template-columns:repeat(2,1fr); }
  .case-up{ margin-top:0; }
  .vs-wrap{ grid-template-columns:1fr; gap:34px; }
  .news-card-link{ flex-direction:column; }
  .news-img{ width:100%; aspect-ratio:16/9; }
}
@media (max-width:767.98px){
  .hero{ min-height:560px; }
  .hero-inner{ padding-top:44px; padding-bottom:70px; }
  .hero-sub{ font-size:15px; }
  .hero-btns .btn{ width:100%; }
  .stats-grid{ grid-template-columns:1fr 1fr; padding:22px 16px; }
  .stat-num{ font-size:30px; }
  .adv-grid{ grid-template-columns:1fr; grid-template-areas:"a1" "a2" "a3" "a4" "a5" "a6"; }
  .svc-grid{ grid-template-columns:1fr; }
  .indus-grid{ grid-template-columns:repeat(2,1fr); }
  .flow-line{ grid-template-columns:1fr; }
  .case-row{ grid-template-columns:1fr; }
  .cta{ margin:60px 12px 0; }
  .cta-inner{ padding:54px 18px; }
  .vs-sticker{ right:4px; top:-10px; }
  .region-map{ padding:24px 14px 16px; }
}