/* ============================================================
   lnwmold.com —— 全站统一基础样式（儿童可爱风 · 定制营销官网）
   文件：css/base.css
   说明：全站共享的设计变量 / 重置 / 顶部联系条 / 固定导航 /
         统一页脚 / 悬浮联系方式 / 通用按钮 / 滚动渐入动画 / 响应式
   用法：每个页面 <head> 中先引入本文件，再引入 css/page-xxx.css
   ============================================================ */

/* ---------- 设计变量（全站唯一色板与字体令牌） ---------- */
:root{
  /* 儿童可爱风三色：浅黄 / 浅粉 / 浅绿 */
  --cream:   #FFF6DC;   /* 奶油黄 · 主背景 */
  --cream-2: #FFEFC2;   /* 深一点奶油黄 */
  --yellow:  #F5B82E;   /* 主黄色 */
  --yellow-deep: #E8A020;
  --yellow-soft: #FFE9B8;
  --pink:    #F27BA8;   /* 主粉色 */
  --pink-deep: #E05A8A;
  --pink-soft: #FFE4F0;
  --pink-mid:  #FFB8D6;
  --green:   #6FBF73;   /* 主绿色 */
  --green-deep: #4FA356;
  --green-soft: #E9F7E9;
  --green-mid:  #BFE8BF;

  /* 文字色 */
  --ink:   #5B4636;    /* 暖棕 · 标题 */
  --body:  #6F5F52;    /* 正文 */
  --dark:  #4B4453;    /* 深紫灰 · 页脚 */
  --white: #FFFFFF;

  /* 圆角（大圆角是可爱风的关键） */
  --r-s: 14px;
  --r-m: 20px;
  --r-l: 28px;
  --r-xl: 40px;
  --r-full: 999px;

  /* 柔和彩色阴影 */
  --shadow-s: 0 6px 18px rgba(245,184,46,.14);
  --shadow-m: 0 12px 32px rgba(242,123,168,.16);
  --shadow-l: 0 22px 52px rgba(111,191,115,.18);

  /* 字体栈（系统字体，无第三方依赖） */
  --font: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",-apple-system,"Segoe UI",Roboto,sans-serif;

  --maxw: 1200px;   /* 内容最大宽度 */
  --nav-h: 74px;    /* 固定导航高度 */
}

/* ---------- 重置与基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  color:var(--body);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,233,184,.5) 0, transparent 26%),
    radial-gradient(circle at 88% 20%, rgba(255,228,240,.55) 0, transparent 24%),
    radial-gradient(circle at 70% 90%, rgba(233,247,233,.6) 0, transparent 28%),
    var(--cream);
  line-height:1.75;
  font-size:16px;
  min-height:100vh;
}
img{ max-width:100%; height:auto; display:block; border:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
h1,h2,h3,h4,h5,h6{ color:var(--ink); line-height:1.35; font-weight:800; }
h1{ font-size:clamp(30px,4.6vw,52px); }
h2{ font-size:clamp(24px,3.4vw,36px); }
h3{ font-size:clamp(18px,2.2vw,24px); }
h4{ font-size:18px; }
p{ margin:0 0 14px; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
input,select,textarea{ font-family:inherit; font-size:16px; }
:focus-visible{ outline:3px dashed var(--yellow); outline-offset:3px; border-radius:6px; }

/* 主内容容器 */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* 区块垂直留白（页面内的布局骨架由各页 page-xxx.css 独立设计） */
.section{ position:relative; }

/* ---------- 通用按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; border-radius:var(--r-full);
  font-weight:700; font-size:15px; line-height:1;
  color:var(--ink); background:var(--white);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn:hover{ transform:translateY(-3px) rotate(-.5deg); }
.btn:active{ transform:translateY(-1px); }
.btn-lg{ padding:16px 34px; font-size:16px; }
.btn-sm{ padding:9px 18px; font-size:14px; }
.btn-yellow{ background:linear-gradient(135deg,var(--yellow),var(--yellow-deep)); color:#fff; box-shadow:var(--shadow-s); }
.btn-pink{ background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff; box-shadow:var(--shadow-m); }
.btn-green{ background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff; box-shadow:0 10px 26px rgba(111,191,115,.28); }
.btn-ghost{ background:var(--white); color:var(--ink); border:2px dashed var(--pink-mid); }
.btn-ghost:hover{ background:var(--pink-soft); }

/* ---------- 小标签（胶囊） ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 15px; border-radius:var(--r-full);
  font-size:13px; font-weight:700; line-height:1.4;
}
.tag svg{ width:14px; height:14px; }
.tag-yellow{ background:var(--yellow-soft); color:var(--yellow-deep); }
.tag-pink{ background:var(--pink-soft); color:var(--pink-deep); }
.tag-green{ background:var(--green-soft); color:var(--green-deep); }

/* ============================================================
   ① 顶部联系条（全站每页可见，联系方式显眼处）
   ============================================================ */
.topbar{
  background:var(--cream-2);
  border-bottom:2px dashed var(--pink-mid);
  position:relative; z-index:60;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-height:38px; padding-top:4px; padding-bottom:4px;
}
.topbar-slogan{
  font-size:13px; font-weight:700; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.topbar-slogan::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 4px rgba(111,191,115,.22);
  flex:none;
}
.topbar-contact{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.topbar-item{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--ink);
  padding:3px 12px; border-radius:var(--r-full);
  background:rgba(255,255,255,.65);
  transition:background .2s ease, color .2s ease;
}
.topbar-item svg{ width:14px; height:14px; stroke:var(--pink-deep); }
.topbar-item:hover{ background:var(--white); color:var(--pink-deep); }

/* ============================================================
   ② 顶部固定导航（滚动变色 + 移动端汉堡菜单）
   ============================================================ */
.site-head{ position:sticky; top:0; z-index:50; }
.nav{
  background:rgba(255,250,236,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:2px dashed var(--yellow-soft);
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 30px rgba(91,70,54,.10);
  border-bottom-color:var(--pink-mid);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; min-height:var(--nav-h);
}
.nav-logo{ flex:none; display:inline-flex; align-items:center; }
.nav-logo img{ height:42px; width:auto; }
.nav-menu{
  display:flex; align-items:center; gap:2px;
  margin-left:auto; white-space:nowrap;
}
.nav-link{
  display:inline-flex; align-items:center; gap:4px;
  padding:10px 13px; border-radius:var(--r-full);
  font-size:15px; font-weight:700; color:var(--ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-link svg.chev{ width:12px; height:12px; }
.nav-link:hover{ background:var(--yellow-soft); color:var(--yellow-deep); transform:translateY(-1px); }
/* 当前页高亮（页面 body 写 data-page="xxx"） */
body[data-page="index"] .nav-link[data-nav="index"],
body[data-page="industry"] .nav-link[data-nav="industry"],
body[data-page="package"] .nav-link[data-nav="package"],
body[data-page="case"] .nav-link[data-nav="case"],
body[data-page="process"] .nav-link[data-nav="process"],
body[data-page="advantage"] .nav-link[data-nav="advantage"],
body[data-page="faq"] .nav-link[data-nav="faq"],
body[data-page="about"] .nav-link[data-nav="about"],
body[data-page="quote"] .nav-link[data-nav="quote"]{
  background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));
  color:#fff; box-shadow:var(--shadow-s);
}
/* 下拉：行业解决方案 */
.nav-dropdown{ position:relative; }
.nav-dropdown-panel{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translate(-50%,8px);
  min-width:560px;
  background:var(--white); border:2px dashed var(--pink-mid); border-radius:var(--r-m);
  box-shadow:0 24px 60px rgba(91,70,54,.18);
  padding:18px;
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:80;
}
.nav-dropdown-panel a{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:12px;
  font-size:14px; font-weight:600; color:var(--ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-dropdown-panel a::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--pink); flex:none;
}
.nav-dropdown-panel a:nth-child(3n){ background:transparent; }
.nav-dropdown-panel a:hover{ background:var(--pink-soft); color:var(--pink-deep); transform:translateX(3px); }
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown.open .nav-dropdown-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.nav-cta{ margin-left:10px; flex:none; }
/* 汉堡按钮（<1280px 显示） */
.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border-radius:14px;
  background:var(--yellow-soft); border:2px dashed var(--yellow);
  flex:none;
}
.nav-burger span{ display:block; width:20px; height:2.6px; margin:0 auto; border-radius:2px; background:var(--yellow-deep); transition:transform .3s ease, opacity .3s ease; }
.site-head.nav-open .nav-burger span:nth-child(1){ transform:translateY(7.6px) rotate(45deg); }
.site-head.nav-open .nav-burger span:nth-child(2){ opacity:0; }
.site-head.nav-open .nav-burger span:nth-child(3){ transform:translateY(-7.6px) rotate(-45deg); }

/* ============================================================
   ③ 统一页脚（版权 / 联系方式 / 导航链接）
   ============================================================ */
.site-footer{
  margin-top:60px;
  background:var(--dark);
  color:#EAD9C9;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  position:relative; overflow:hidden;
}
.site-footer::before{ /* 可爱装饰：彩色小圆点 */
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg,var(--yellow) 0 25%,var(--pink) 25% 50%,var(--green) 50% 75%,var(--yellow-soft) 75%);
}
.footer-wave{ /* 页脚顶部波浪分隔（由各页自绘或留空） */ }
.footer-main{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:34px;
  padding:52px 20px 36px;
}
.footer-brand p{ font-size:14px; margin-top:14px; max-width:300px; }
.footer-logo{ height:44px; width:auto; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:40px; height:40px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.footer-social a:hover{ background:var(--pink); transform:translateY(-3px) rotate(-6deg); }
.footer-social svg{ width:18px; height:18px; }
.footer-col h4{
  color:#FFF3D6; font-size:16px; margin-bottom:16px;
  display:inline-flex; align-items:center; gap:8px;
}
.footer-col h4::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--yellow); }
.footer-col ul li{ margin-bottom:9px; }
.footer-col ul a{
  font-size:14px; color:#D9C6B2;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .2s ease, transform .2s ease;
}
.footer-col ul a::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--pink); opacity:.8; }
.footer-col ul a:hover{ color:var(--yellow); transform:translateX(4px); }
.footer-contact li{
  display:flex; align-items:center; gap:10px;
  font-size:14px; margin-bottom:12px;
}
.footer-contact svg{ width:16px; height:16px; stroke:var(--yellow); flex:none; }
.footer-contact strong{ color:#FFF3D6; font-size:15px; }
.footer-bottom{
  border-top:1px dashed rgba(255,255,255,.16);
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:13px; color:#C4B09A;
}
.footer-bottom a{ color:var(--yellow-soft); }
.footer-icp{ color:#C4B09A; } /* 仅 index.html 页脚保留备案号 */

/* ============================================================
   ④ 悬浮联系方式（全站每页右侧常驻，客户一眼可见）
   ============================================================ */
.float-contact{
  position:fixed; right:18px; bottom:120px; z-index:90;
  display:flex; flex-direction:column; gap:12px;
}
.float-item{
  width:52px; height:52px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  color:#fff; box-shadow:var(--shadow-m);
  transition:transform .25s ease, width .25s ease;
  position:relative; overflow:hidden;
}
.float-item svg{ width:24px; height:24px; flex:none; }
.float-item .float-label{
  position:absolute; right:58px; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-size:13px; font-weight:700; color:var(--ink);
  background:#fff; border:2px dashed var(--pink-mid); border-radius:12px;
  padding:6px 12px; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.float-item:hover{ transform:translateY(-4px); }
.float-item:hover .float-label{ opacity:1; visibility:visible; }
.float-item.f-gree{ background:linear-gradient(135deg,var(--green),var(--green-deep)); box-shadow:0 10px 26px rgba(111,191,115,.3); }
.float-item.f-yell{ background:linear-gradient(135deg,var(--yellow),var(--yellow-deep)); box-shadow:var(--shadow-s); }

/* ============================================================
   ⑤ 滚动渐入动画（配合 js/main.js 的 IntersectionObserver）
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal-left{ opacity:0; transform:translateX(-34px); transition:opacity .7s ease, transform .7s ease; }
.reveal-right{ opacity:0; transform:translateX(34px); transition:opacity .7s ease, transform .7s ease; }
.reveal-zoom{ opacity:0; transform:scale(.92); transition:opacity .7s ease, transform .7s ease; }
.reveal.in,.reveal-left.in,.reveal-right.in,.reveal-zoom.in{ opacity:1; transform:none; }
/* 进入视口后的延迟节奏（页面可用） */
.delay-1{ transition-delay:.1s; } .delay-2{ transition-delay:.2s; }
.delay-3{ transition-delay:.3s; } .delay-4{ transition-delay:.4s; }

/* 通用装饰：小云朵 / 小圆点（各页可复用，保持可爱气质） */
.doodle{ position:absolute; pointer-events:none; user-select:none; }

/* 面包屑（内页通用，视觉细节各页微调） */
.crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:13px; font-weight:600; color:var(--body);
}
.crumb a{ color:var(--pink-deep); }
.crumb svg{ width:12px; height:12px; }
.crumb .cur{ color:var(--ink); }

/* 响应式：
   宽度规则 —— 桌面导航完整显示 ≥1280px；
   1280px 以下用汉堡 + 抽屉菜单（彻底避免导航折行） */
@media (max-width:1279.98px){
  .nav-burger{ display:flex; }
  .nav-menu{
    position:fixed; top:calc(var(--nav-h) + 38px); right:0;
    width:min(360px,86vw); max-height:calc(100vh - var(--nav-h) - 48px);
    overflow-y:auto;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--white); border:2px dashed var(--pink-mid); border-radius:var(--r-m);
    box-shadow:0 24px 60px rgba(91,70,54,.2);
    padding:14px; margin:0;
    transform:translateX(110%); opacity:0; visibility:hidden;
    transition:transform .3s ease, opacity .3s ease, visibility .3s;
    white-space:normal;
  }
  .site-head.nav-open .nav-menu{ transform:none; opacity:1; visibility:visible; }
  .nav-link{ padding:12px 14px; font-size:15px; border-radius:12px; width:100%; justify-content:flex-start; }
  .nav-link svg.chev{ margin-left:auto; transform:rotate(-90deg); }
  /* 抽屉打开时导航是 fixed 层，流内只剩 logo+CTA+汉堡：CTA 保持紧凑靠右，避免把汉堡挤出视口 */
  .nav-cta{ margin-left:auto; width:auto; padding:9px 16px; font-size:14px; }
  .nav-dropdown-panel{
    position:static; transform:none; min-width:0; width:100%;
    grid-template-columns:1fr; padding:6px 0 6px 16px;
    box-shadow:none; border:0; border-left:2px dashed var(--pink-mid); border-radius:0;
    opacity:1; visibility:visible; pointer-events:auto; max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-dropdown.open .nav-dropdown-panel{ max-height:640px; }
  .nav-dropdown:hover .nav-dropdown-panel{ transform:none; }
  .nav-dropdown-panel a{ padding:8px 10px; }
}
/* 抽屉菜单顶部偏移：topbar 高度动态，用变量兜底 */
@media (max-width:767.98px){
  .topbar-slogan{ display:none; }
  .topbar-item{ font-size:12px; padding:2px 9px; }
  .topbar-item svg{ width:12px; height:12px; }
  .nav-menu{ top:calc(var(--nav-h) + 36px); }
  .nav-logo img{ height:34px; }
  .nav-cta{ padding:8px 12px; font-size:13px; }
  .nav{ border-bottom-width:2px; }
  .float-contact{ right:10px; bottom:90px; gap:10px; }
  .float-item{ width:46px; height:46px; border-radius:16px; }
  .float-item svg{ width:20px; height:20px; }
  .footer-main{ grid-template-columns:1fr 1fr; gap:24px; padding:40px 20px 28px; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .btn-lg{ padding:14px 26px; }
}

/* 动效减弱偏好：关闭滚动动画，保证可读性 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal,.reveal-left,.reveal-right,.reveal-zoom{ opacity:1; transform:none; }
}