/* ============================================================
   虚拟主机销售系统 · 首页「暖白炭黑」 Paper Ink 2026
   配色随背景（米白底黑白线稿人物）适配：暖白 / 米色 / 炭黑 / 暖棕点缀
   ============================================================ */
:root{
  /* 暖白炭黑配色（与线稿人物背景协调） */
  --nm-ink:#2a2724;
  --nm-ink-soft:#7a7267;
  --nm-ink-muted:#9a9184;

  --nm-bg:#f7f3ea;
  --nm-bg-2:#f0eade;

  --nm-text:#2a2724;
  --nm-muted:#7a7267;

  --nm-card:rgba(255,255,255,.68);
  --nm-card-strong:rgba(255,255,255,.86);
  --nm-light:rgba(255,255,255,.92);
  --nm-border:rgba(255,255,255,.84);
  --nm-border-inset:rgba(255,255,255,.45);

  --nm-accent:#b08968;
  --nm-accent-soft:rgba(176,137,104,.12);

  /* 炭黑渐变（按钮 / 强调） */
  --nm-grad:linear-gradient(135deg,#423b33,#1e1b18);
  --nm-grad-soft:linear-gradient(135deg,rgba(66,59,51,.08),rgba(30,27,24,.08));

  --nm-shadow:0 14px 34px rgba(80,70,58,.14);
  --nm-shadow-sm:0 8px 20px rgba(80,70,58,.10);
  --nm-shadow-lg:0 24px 54px rgba(80,70,58,.20);
  --nm-inset:inset 2px 2px 6px rgba(139,128,112,.18), inset -2px -2px 6px rgba(255,255,255,.9);
  --nm-inset-sm:inset 1px 1px 4px rgba(139,128,112,.16), inset -1px -1px 4px rgba(255,255,255,.9);

  --nm-font:"ZCOOL KuaiLe","Baloo 2","Varela Round","Yuanti SC","PingFang SC","Microsoft YaHei",sans-serif;
}

/* ============ 全局：人物背景 + 暖白遮罩 + 圆润字体 ============ */
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{
  overflow-x:hidden;max-width:100%;
  color:var(--nm-text)!important;
  background:
    linear-gradient(180deg, rgba(247,243,234,.56) 0%, rgba(240,234,222,.68) 100%),
    url('/bj/desktop-wallpaper.jpg') no-repeat center center fixed!important;
  background-size:cover, cover!important;
  background-attachment:fixed!important;
  font-family:var(--nm-font)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#page-container{background:transparent!important}
#main-container{background:transparent!important}
::selection{background:rgba(176,137,104,.26)}
h1,h2,h3,h4,h5,h6,button,input,textarea,select,.nm-btn,.nav-menu a{
  font-family:var(--nm-font)!important;
}

/* ============ 顶部导航：暖白毛玻璃 ============ */
.top-nav{
  width:100%;height:68px;
  position:fixed;top:0;left:0;z-index:99999;
  background:rgba(252,249,243,.86)!important;
  border-bottom:1px solid rgba(120,105,88,.12)!important;
  box-shadow:0 6px 22px rgba(80,70,58,.10)!important;
  backdrop-filter:blur(22px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(120%)!important;
}
.nav-container{width:min(1380px,92%);height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-logo,.nav-logo a{font-size:22px;font-weight:800;color:var(--nm-ink)!important;text-decoration:none;letter-spacing:.4px}
.nav-logo a::after{content:" ✿";font-size:13px;color:var(--nm-accent)}
.nav-menu{display:flex;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-menu::-webkit-scrollbar{display:none}
.nav-menu a{
  color:#6b6357!important;font-size:15px;font-weight:700;text-decoration:none;
  margin:0 4px;padding:9px 15px;border-radius:14px;white-space:nowrap;flex:none;transition:.22s;
}
.nav-menu a:hover{color:var(--nm-ink)!important;background:rgba(90,78,62,.07)!important}
.nav-menu a.active{color:#fff!important;background:var(--nm-grad)!important;box-shadow:0 8px 20px rgba(50,44,36,.24)}

/* ============ Hero：暖黑半透明遮罩，透出人物背景 ============ */
.nm-hero{
  position:relative;padding:150px 0 120px;overflow:hidden;
  background:linear-gradient(110deg,rgba(26,23,20,.90) 0%,rgba(52,46,40,.74) 48%,rgba(92,82,70,.44) 100%);
  backdrop-filter:blur(3px) saturate(90%);
  -webkit-backdrop-filter:blur(3px) saturate(90%);
  color:#fff;
}
.nm-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 66% 30%, rgba(214,180,145,.20), transparent 44%),
    radial-gradient(circle at 14% 74%, rgba(176,137,104,.24), transparent 40%);
}
.nm-hero::after{display:none}
.nm-hero-inner{
  position:relative;z-index:1;width:min(1380px,92%);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:56px;align-items:center;
}
.nm-kicker{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:99px;
  color:#f0e2cf;font-size:12.5px;font-weight:800;letter-spacing:.6px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(12px);
}
.nm-kicker i{color:#e3c9a8}
.nm-brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:#fff;margin-bottom:22px}
.nm-brand i{color:#e3c9a8}
.nm-title{
  font-size:clamp(34px,4.6vw,60px);line-height:1.24;margin:22px 0 20px;
  font-weight:800;letter-spacing:-.5px;color:#fff;max-width:760px;min-height:1.24em;
}
.nm-title span{
  background:linear-gradient(120deg,#f7ecdd,#d6bc9c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* 打字机光标 */
.nm-caret{
  display:inline-block;width:5px;height:.92em;margin-left:8px;vertical-align:-.1em;border-radius:3px;
  background:linear-gradient(180deg,#f7ecdd,#d6bc9c);
  animation:nmCaret .9s step-end infinite;
}
@keyframes nmCaret{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.nm-caret{animation:none}}
.nm-desc{font-size:18px;line-height:1.95;color:rgba(246,238,226,.84);max-width:620px;margin:0}
.nm-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.nm-btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:14px;
  font-weight:800;font-size:15px;text-decoration:none!important;cursor:pointer;transition:.25s;
  border:1px solid transparent;
}
.nm-btn-main{
  color:#fff!important;background:linear-gradient(135deg,#4a423a,#201d19);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 32px rgba(20,17,14,.34);
}
.nm-btn-main:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(20,17,14,.44)}
.nm-btn-ghost{
  color:#fff!important;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.30);backdrop-filter:blur(12px);
}
.nm-btn-ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.22)}

/* Hero 面板（已隐藏，为人物让位） */
.nm-hero-panel{display:none!important;position:relative;padding:26px;border-radius:24px}

/* ============ 统计条 ============ */
.nm-stats{
  width:min(1380px,92%);margin:-30px auto 0;position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.nm-stat{
  padding:24px 20px;text-align:center;border-radius:18px;
  background:rgba(255,255,255,.86);
  border:1px solid var(--nm-border);
  box-shadow:var(--nm-shadow);backdrop-filter:blur(16px);
}
.nm-stat b{font-size:28px;font-weight:800;color:var(--nm-ink)}
.nm-stat span{display:block;color:var(--nm-muted);font-size:13px;margin-top:5px}

/* ============ 通用 section ============ */
.nm-section{padding:96px 0;position:relative}
.nm-wrap{width:min(1380px,92%);margin:0 auto}
.nm-center{text-align:center}
.nm-eyebrow{display:inline-block;color:var(--nm-accent);font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase}
.nm-heading{font-size:clamp(30px,3.4vw,46px);font-weight:800;margin:12px 0 14px;letter-spacing:-1px;color:var(--nm-ink)}
.nm-sub{color:var(--nm-muted);font-size:16px;line-height:1.85}

/* 毛玻璃卡片基类 */
.nm-card{
  background:rgba(255,255,255,.80);
  border:1px solid var(--nm-border);
  box-shadow:var(--nm-shadow);border-radius:22px;
  backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
}

/* ============ 特性 ============ */
.nm-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
.nm-feature{padding:32px 28px;min-height:235px;transition:.28s}
.nm-feature:hover{transform:translateY(-8px);box-shadow:var(--nm-shadow-lg)}
.nm-icon{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  font-size:24px;margin-bottom:24px;
  background:linear-gradient(145deg,#faf5ec,#f0e8da);
  border:1px solid var(--nm-border);box-shadow:var(--nm-shadow-sm);color:var(--nm-accent);
}
.nm-icon i{color:var(--nm-accent)}
.nm-feature h3{font-size:20px;margin:0 0 10px;font-weight:800;color:var(--nm-ink)}
.nm-feature p{color:var(--nm-muted);line-height:1.8;margin:0}

/* ============ 产品 ============ */
.nm-products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
.nm-product{padding:26px;position:relative;overflow:hidden;min-height:320px;transition:.28s}
.nm-product:hover{transform:translateY(-8px);box-shadow:var(--nm-shadow-lg)}
.nm-product::after{
  content:"";position:absolute;width:170px;height:170px;border-radius:50%;
  right:-85px;top:-85px;filter:blur(4px);pointer-events:none;
}
.nm-product:nth-child(4n+1){background:linear-gradient(145deg,#fdfaf4,#fffdf9)}
.nm-product:nth-child(4n+1)::after{background:rgba(176,137,104,.14)}
.nm-product:nth-child(4n+2){background:linear-gradient(145deg,#fbf3ec,#fffdf9)}
.nm-product:nth-child(4n+2)::after{background:rgba(198,150,140,.13)}
.nm-product:nth-child(4n+3){background:linear-gradient(145deg,#f8f3e9,#fffdf9)}
.nm-product:nth-child(4n+3)::after{background:rgba(176,160,120,.14)}
.nm-product:nth-child(4n){background:linear-gradient(145deg,#f4f2ec,#fffdf9)}
.nm-product:nth-child(4n)::after{background:rgba(150,160,150,.12)}
.nm-tag{
  display:inline-block;padding:6px 12px;border-radius:99px;font-size:11px;font-weight:800;color:#8a6b4c;
  background:rgba(176,137,104,.12);border:1px solid rgba(176,137,104,.20);
}
.nm-product h3{font-size:21px;margin:20px 0 9px;font-weight:800;color:var(--nm-ink)}
.nm-price{font-size:34px;font-weight:800;color:var(--nm-ink)}
.nm-price small{font-size:13px;color:var(--nm-muted);font-weight:700}
.nm-list{list-style:none;padding:0;margin:20px 0;color:#6b6357;font-size:13.5px;line-height:2.1}
.nm-list li::before{content:"✓";color:var(--nm-accent);font-weight:800;margin-right:9px}
.nm-product .nm-buy{
  display:block;text-align:center;padding:12px;border-radius:12px;text-decoration:none;
  color:#fff;font-weight:800;background:var(--nm-grad);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 12px 26px rgba(50,44,36,.22);transition:.22s;
}
.nm-product .nm-buy:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(50,44,36,.30)}

/* ============ 流程 ============ */
.nm-process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}
.nm-step{padding:30px 22px;text-align:center;transition:.28s}
.nm-step:hover{transform:translateY(-6px);box-shadow:var(--nm-shadow-lg)}
.nm-step-num{
  width:48px;height:48px;margin:0 auto 18px;border-radius:14px;display:grid;place-items:center;
  font-weight:800;font-size:17px;color:#fff;background:var(--nm-grad);
  border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 26px rgba(50,44,36,.22);
}
.nm-step h4{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--nm-ink)}
.nm-step p{margin:0;color:var(--nm-muted);font-size:13px;line-height:1.75}

/* ============ FAQ ============ */
.nm-faq{max-width:760px;margin:42px auto 0;display:flex;flex-direction:column;gap:14px}
.nm-faq-item{
  background:rgba(255,255,255,.84);
  border:1px solid var(--nm-border);
  border-radius:16px;box-shadow:var(--nm-shadow);backdrop-filter:blur(16px);overflow:hidden;
}
.nm-faq-q{
  display:flex;align-items:center;justify-content:space-between;padding:19px 24px;cursor:pointer;
  font-weight:800;color:var(--nm-ink);font-size:15px;user-select:none;
}
.nm-faq-q i{color:var(--nm-accent);transition:transform .25s ease;font-size:13px}
.nm-faq-item.open .nm-faq-q i{transform:rotate(180deg)}
.nm-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 24px;color:#6b6357;font-size:13.5px;line-height:1.95}
.nm-faq-item.open .nm-faq-a{max-height:220px;padding-bottom:22px}

/* ============ CTA ============ */
.nm-cta{padding:90px 0}
.nm-cta-card{
  max-width:900px;margin:0 auto;text-align:center;padding:64px 48px;border-radius:28px;
  background:linear-gradient(135deg,rgba(30,27,24,.94),rgba(58,51,44,.88),rgba(92,82,70,.82));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px rgba(20,17,14,.34);
  position:relative;overflow:hidden;color:#fff;
}
.nm-cta-card::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,180,145,.22),transparent 62%);right:-120px;top:-140px;pointer-events:none;
}
.nm-cta-card::after{
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(176,137,104,.20),transparent 62%);left:-120px;bottom:-150px;pointer-events:none;
}
.nm-cta-card h2{font-size:38px;margin:0 0 12px;font-weight:800;color:#fff;letter-spacing:-1px;position:relative}
.nm-cta-card p{color:rgba(240,232,220,.82);margin:0 0 30px;font-size:16px;position:relative}
.nm-cta-card .nm-actions{justify-content:center;margin-top:0;position:relative}
.nm-cta-card .nm-kicker{color:#f0e2cf;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);margin-bottom:18px}
.nm-cta-card .nm-btn-ghost{color:#fff!important;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30)}

/* ============ 页脚 ============ */
.mc-footer{
  background:rgba(252,249,243,.90)!important;
  border-top:1px solid rgba(120,105,88,.12)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
}
.mc-footer-nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.mc-footer-nav a{
  color:#6b6357;font-size:13.5px;font-weight:700;text-decoration:none;
  padding:8px 16px;border-radius:99px;transition:.2s;
}
.mc-footer-nav a:hover,.mc-footer-nav a.active{color:var(--nm-ink);background:rgba(90,78,62,.07)}
.mc-footer .row{color:var(--nm-muted)}

/* ============ 深色模式适配 ============ */
[data-theme="dark"]{
  --nm-card:rgba(42,38,34,.62);--nm-card-strong:rgba(48,43,38,.80);
  --nm-light:rgba(255,255,255,.05);--nm-dark:rgba(0,0,0,.5);--nm-dark-strong:rgba(0,0,0,.62);
  --nm-border:rgba(255,255,255,.09);--nm-border-inset:rgba(255,255,255,.06);
  --nm-text:#ece6dc;--nm-muted:#a89e90;--nm-ink:#ece6dc;
}
[data-theme="dark"] body{
  background:
    linear-gradient(180deg, rgba(20,18,16,.72) 0%, rgba(26,23,20,.80) 100%),
    url('/bj/desktop-wallpaper.jpg') no-repeat center center fixed!important;
  background-size:cover, cover!important;
}
[data-theme="dark"] .top-nav{background:rgba(28,25,22,.86)!important}
[data-theme="dark"] .mc-footer{background:rgba(28,25,22,.9)!important}
[data-theme="dark"] .nm-card,[data-theme="dark"] .nm-product,[data-theme="dark"] .nm-faq-item,
[data-theme="dark"] .nm-stat{
  background:linear-gradient(145deg,rgba(48,43,38,.72),rgba(32,29,26,.52))!important;
}
[data-theme="dark"] .nm-heading,[data-theme="dark"] .nm-feature h3,
[data-theme="dark"] .nm-product h3,[data-theme="dark"] .nm-step h4,[data-theme="dark"] .nm-faq-q{color:var(--nm-text)}

/* ============ 响应式 ============ */
@media(max-width:991px){
  .nm-hero-inner{grid-template-columns:1fr}
  .nm-hero-panel{display:none}
  .nm-grid4,.nm-products{grid-template-columns:repeat(2,1fr)}
  .nm-process{grid-template-columns:repeat(2,1fr)}
  .nm-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  body{
    background:linear-gradient(180deg, rgba(247,243,234,.56) 0%, rgba(240,234,222,.68) 100%), url('/bj/hero-character.jpg') no-repeat right bottom fixed!important;
    background-size:cover, auto 42vh!important;
  }
  .top-nav{height:62px!important}
  .nav-menu a{margin:0 2px;padding:8px 10px;font-size:13.5px}
  .nm-hero{padding:110px 0 80px}
  .nm-title{font-size:38px;letter-spacing:-1px}
  .nm-desc{font-size:15px;line-height:1.85}
  .nm-section{padding:64px 0}
  .nm-grid4,.nm-products,.nm-process{grid-template-columns:1fr;gap:14px}
  .nm-stats{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:-20px}
  .nm-stat{padding:18px 10px}
  .nm-stat b{font-size:23px}
  .nm-feature{min-height:0;padding:26px 22px}
  .nm-product{min-height:0}
  .nm-cta-card{padding:46px 24px}
  .nm-cta-card h2{font-size:30px}
  .nm-wrap{width:90%}
}