/* ==========================================================================
   纳客棋牌室收银系统 — 自定义样式
   仅承载 Tailwind 无法表达的：设计令牌、品牌组件、纹理、动效
   所有自定义类以 nk- 前缀命名，避免与 Tailwind 工具类冲突
   ========================================================================== */

:root {
  --nk-brand:      #1B7A4A;
  --nk-brand-mid:  #146039;
  --nk-brand-deep: #0D4D2E;
  --nk-brand-light:#2EAA6A;
  --nk-brand-soft: #F3F8F5;
  --nk-brand-tint: #E4F1E9;
  --nk-pink:       #F4A7B9;
  --nk-pink-deep:  #D9788F;
  --nk-pink-soft:  #FDEFF3;
  --nk-ink:        #1A2E23;
  --nk-ink-soft:   #5F7268;
  --nk-ink-mute:   #6B7C72;
  --nk-radius:     16px;
  --nk-shadow:     0 4px 24px rgba(27, 122, 74, .08);
  --nk-shadow-lg:  0 16px 44px rgba(27, 122, 74, .16);
  --nk-ease:       cubic-bezier(.22, .61, .36, 1);
  --nk-header-h:   68px;
}

@media (min-width: 768px) { :root { --nk-header-h: 76px; } }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
               "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system,
               "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 0;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(244, 167, 185, .45); color: var(--nk-ink); }

/* 焦点可见性 ------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--nk-brand-light);
  outline-offset: 3px;
  border-radius: 6px;
}
.nk-hero a:focus-visible,
.nk-cta a:focus-visible { outline-color: #fff; }

.nk-skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: #fff; color: var(--nk-brand); font-weight: 700;
  padding: 10px 18px; border-radius: 0 0 12px 12px;
  box-shadow: var(--nk-shadow); transition: top .2s var(--nk-ease);
}
.nk-skip:focus { top: 0; }

/* 通用容器与区块节奏 ------------------------------------------------------ */
.nk-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1024px) { .nk-wrap { padding-inline: 24px; } }

.nk-section { padding-block: 64px; }
@media (min-width: 768px)  { .nk-section { padding-block: 84px; } }
@media (min-width: 1200px) { .nk-section { padding-block: 104px; } }

.nk-head { max-width: 760px; margin-inline: auto; text-align: center; }

.nk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--nk-brand); text-transform: uppercase;
  background: var(--nk-brand-tint);
  padding: 6px 14px; border-radius: 999px;
}
.nk-eyebrow--dark {
  color: #EAF7EF; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22); letter-spacing: .1em;
}

.nk-title {
  margin-top: 18px;
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 800; line-height: 1.25; letter-spacing: -.015em;
  color: var(--nk-ink);
  text-wrap: balance;
}
.nk-sub {
  margin-top: 14px; font-size: 15.5px; line-height: 1.75; color: var(--nk-ink-soft);
}
@media (min-width: 768px) { .nk-sub { font-size: 16.5px; } }

.nk-head + * { margin-top: 44px; }
@media (min-width: 1024px) { .nk-head + * { margin-top: 56px; } }

/* 卡片 ------------------------------------------------------------------ */
.nk-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(27, 122, 74, .10);
  border-radius: var(--nk-radius);
  box-shadow: var(--nk-shadow);
  padding: 26px 24px;
  transition: transform .2s var(--nk-ease), box-shadow .2s var(--nk-ease), border-color .2s var(--nk-ease);
}
.nk-card--flush { padding: 0; }

.nk-card--store:hover,
.nk-card--feat:hover,
.nk-svc:hover {
  transform: translateY(-4px);
  box-shadow: var(--nk-shadow-lg);
  border-color: rgba(27, 122, 74, .26);
}

.nk-card-title {
  margin-top: 16px; font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; color: var(--nk-ink); line-height: 1.4;
}
.nk-card-text {
  margin-top: 10px; font-size: 14.5px; line-height: 1.85; color: var(--nk-ink-soft);
}

/* 卡片顶部绿色渐隐条 —— 打破网格重复感 */
.nk-card--store::before,
.nk-card--feat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--nk-radius) var(--nk-radius) 0 0;
  background: linear-gradient(90deg, var(--nk-brand-light), var(--nk-brand) 55%, transparent);
  opacity: 0; transition: opacity .2s var(--nk-ease);
}
.nk-card--store:hover::before,
.nk-card--feat:hover::before { opacity: 1; }

/* 图标 ------------------------------------------------------------------ */
.nk-store-top, .nk-feat-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.nk-iconbox, .nk-iconring {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 15px;
  background: linear-gradient(145deg, var(--nk-brand-tint), #fff);
  border: 1px solid rgba(27, 122, 74, .16);
  color: var(--nk-brand);
  transition: transform .2s var(--nk-ease), background .2s var(--nk-ease), color .2s var(--nk-ease);
}
.nk-iconring { border-radius: 50%; width: 54px; height: 54px; }
.nk-iconbox svg, .nk-iconring svg { width: 26px; height: 26px; }
.nk-card--store:hover .nk-iconbox,
.nk-card--feat:hover .nk-iconring {
  background: linear-gradient(145deg, var(--nk-brand-light), var(--nk-brand));
  border-color: transparent; color: #fff; transform: scale(1.05) rotate(-3deg);
}
.nk-store-index, .nk-feat-no {
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  color: rgba(27, 122, 74, .30); font-variant-numeric: tabular-nums;
}

/* 标签 chip ------------------------------------------------------------- */
.nk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
}
.nk-chip--green { background: var(--nk-brand-tint); color: var(--nk-brand-mid); }
.nk-chip--pink  { background: var(--nk-pink-soft); color: #B5546C; }

/* 按钮 ------------------------------------------------------------------ */
.nk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px;
  font-size: 15.5px; font-weight: 700; letter-spacing: .01em; line-height: 1;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .2s var(--nk-ease), box-shadow .2s var(--nk-ease),
              background-color .2s var(--nk-ease), color .2s var(--nk-ease),
              border-color .2s var(--nk-ease);
  will-change: transform;
}
.nk-btn--lg { padding: 16px 32px; font-size: 16px; }
.nk-btn--xl { padding: 19px 46px; font-size: 17.5px; }

.nk-btn--primary {
  background: linear-gradient(135deg, var(--nk-brand) 0%, var(--nk-brand-mid) 100%);
  color: #fff; box-shadow: 0 6px 18px rgba(27, 122, 74, .28);
}
.nk-btn--primary:hover {
  background: linear-gradient(135deg, var(--nk-brand-mid) 0%, var(--nk-brand-deep) 100%);
  transform: scale(1.02); box-shadow: 0 10px 26px rgba(13, 77, 46, .34);
}

.nk-btn--light {
  background: #fff; color: var(--nk-brand-deep);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}
.nk-btn--light:hover { background: #EAFAF1; transform: scale(1.02); box-shadow: 0 12px 32px rgba(0, 0, 0, .24); }

.nk-btn--outline-light {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55);
}
.nk-btn--outline-light:hover {
  background: rgba(255, 255, 255, .14); border-color: #fff; transform: scale(1.02);
}

/* 头部导航 -------------------------------------------------------------- */
.nk-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(27, 122, 74, .10);
  transition: box-shadow .25s var(--nk-ease), background-color .25s var(--nk-ease);
}
.nk-header.is-scrolled {
  background: #fff;
  box-shadow: 0 6px 24px rgba(26, 46, 35, .08);
  border-bottom-color: transparent;
}

.nk-logo-mark {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(145deg, var(--nk-brand-light), var(--nk-brand));
  color: #fff; font-size: 17px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(27, 122, 74, .28);
}

.nk-navlink {
  position: relative; padding: 8px 13px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--nk-ink);
  text-decoration: none; transition: color .18s var(--nk-ease), background-color .18s var(--nk-ease);
}
.nk-navlink:hover { color: var(--nk-brand); background: var(--nk-brand-soft); }
.nk-navlink::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--nk-brand-light);
  transform: scaleX(0); transform-origin: left; transition: transform .22s var(--nk-ease);
}
.nk-navlink.is-active { color: var(--nk-brand); }
.nk-navlink.is-active::after { transform: scaleX(1); }

.nk-menubtn {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; border: 1px solid rgba(27, 122, 74, .18);
  color: var(--nk-ink); background: #fff; cursor: pointer;
  transition: background-color .18s var(--nk-ease), color .18s var(--nk-ease);
}
.nk-menubtn:hover { background: var(--nk-brand-soft); color: var(--nk-brand); }
.nk-menubtn svg path { transition: transform .25s var(--nk-ease), opacity .2s var(--nk-ease); transform-origin: center; }
.nk-menubtn[aria-expanded="true"] .nk-burger-1 { transform: translateY(5px) rotate(45deg); }
.nk-menubtn[aria-expanded="true"] .nk-burger-2 { opacity: 0; }
.nk-menubtn[aria-expanded="true"] .nk-burger-3 { transform: translateY(-5px) rotate(-45deg); }

.nk-mobilenav {
  background: #fff; border-top: 1px solid rgba(27, 122, 74, .10);
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .3s var(--nk-ease), opacity .25s var(--nk-ease);
}
.nk-mobilenav.is-open { max-height: 460px; opacity: 1; }
.nk-mnavlink {
  padding: 13px 14px; border-radius: 11px; font-size: 15.5px; font-weight: 600;
  color: var(--nk-ink); text-decoration: none; transition: background-color .18s var(--nk-ease), color .18s var(--nk-ease);
}
.nk-mnavlink:hover, .nk-mnavlink:active { background: var(--nk-brand-soft); color: var(--nk-brand); }

.nk-footlink { color: var(--nk-ink-soft); text-decoration: none; transition: color .18s var(--nk-ease); }
.nk-footlink:hover { color: var(--nk-brand); }

/* Hero ------------------------------------------------------------------ */
.nk-hero {
  position: relative;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(46, 170, 106, .38), transparent 62%),
    linear-gradient(135deg, #1B7A4A 0%, #146039 46%, #0D4D2E 100%);
}
.nk-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(900px 520px at 30% 20%, #000 0%, transparent 78%);
          mask-image: radial-gradient(900px 520px at 30% 20%, #000 0%, transparent 78%);
}

.nk-underline-pink {
  box-shadow: inset 0 -.42em 0 rgba(244, 167, 185, .55);
  border-radius: 2px; padding-bottom: .04em;
}

.nk-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--nk-pink);
  box-shadow: 0 0 0 0 rgba(244, 167, 185, .7); animation: nk-pulse 2.4s infinite;
}
@keyframes nk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(244, 167, 185, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(244, 167, 185, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 167, 185, 0); }
}

.nk-herochip {
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff; font-size: 13.5px; font-weight: 600;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* 资质卡片 */
.nk-cert {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 12px; padding: 11px 13px;
  font-size: 12.8px; font-weight: 600; color: var(--nk-ink); line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transition: transform .2s var(--nk-ease), box-shadow .2s var(--nk-ease);
}
.nk-cert:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
.nk-cert > span { font-size: 16px; line-height: 1; flex: none; }

.nk-tech-note {
  padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--nk-pink);
  color: rgba(255, 255, 255, .82); font-size: 13.8px; line-height: 1.85;
}
.nk-tech-note strong { color: #fff; font-weight: 700; }

/* 麻将牌装饰 */
.nk-tiles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nk-tile {
  position: absolute; display: grid; place-items: center;
  width: 74px; height: 96px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .22); font-size: 34px; font-weight: 800;
}
.nk-tile--1 { left: 4%;  bottom: 12%; transform: rotate(-11deg); }
.nk-tile--2 { left: 15%; bottom: 26%; transform: rotate(7deg); width: 60px; height: 78px; font-size: 27px; }
.nk-tile--3 { right: 3%; top: 9%;     transform: rotate(12deg); width: 56px; height: 72px; font-size: 25px; }
@media (max-width: 1023px) { .nk-tiles { display: none; } }

/* Hero 数据条 */
.nk-herostat b {
  display: block; font-size: 21px; font-weight: 800; color: #fff;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.nk-herostat span { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .68); }
@media (min-width: 768px) { .nk-herostat b { font-size: 24px; } }

/* Hero 产品面板 ---------------------------------------------------------- */
.nk-heropanel-wrap { position: relative; display: flex; width: 100%; max-width: 440px; }
@media (max-width: 1023px) { .nk-heropanel-wrap { margin-inline: auto; } }
.nk-heropanel {
  position: relative; z-index: 2; width: 100%;
  background: #fff; border-radius: 20px; padding: 16px 16px 40px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .30);
}
.nk-panel-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 12px; border-bottom: 1px solid var(--nk-brand-tint);
}
.nk-panel-title { font-size: 14.5px; font-weight: 700; color: var(--nk-ink); }
.nk-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--nk-brand-mid);
  background: var(--nk-brand-tint); padding: 4px 10px; border-radius: 999px;
}
.nk-live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--nk-brand-light);
  animation: nk-blink 1.6s infinite;
}
@keyframes nk-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.nk-rooms {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  padding: 14px 0;
}
.nk-room {
  position: relative; border-radius: 11px; padding: 9px 8px 8px;
  min-height: 74px; display: flex; flex-direction: column; gap: 3px;
  border: 1px solid transparent;
}
.nk-room-id { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.nk-room-time {
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .92;
}
.nk-room-tag { margin-top: auto; font-size: 10.5px; font-weight: 600; opacity: .82; }

.nk-room--free  { background: var(--nk-brand-soft); border-color: rgba(27, 122, 74, .14); color: var(--nk-ink-soft); }
.nk-room--busy  { background: linear-gradient(150deg, var(--nk-brand-light), var(--nk-brand)); color: #fff; box-shadow: 0 6px 16px rgba(27, 122, 74, .30); }
.nk-room--book  { background: var(--nk-pink-soft); border-color: rgba(217, 120, 143, .30); color: #A94E64; }
.nk-room--clean { background: #F4F6F5; border-color: #E3E8E5; color: var(--nk-ink-mute); }
@media (max-width: 479px) {
  .nk-rooms { gap: 6px; }
  .nk-room { padding: 8px 6px 7px; min-height: 66px; }
  .nk-room-time { font-size: 10px; }
  .nk-room-tag { font-size: 9.5px; }
}

.nk-bill { border-top: 1px dashed rgba(27, 122, 74, .22); padding-top: 12px; }
.nk-bill-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--nk-ink-soft); padding: 4px 0;
}
.nk-bill-row b { font-weight: 700; color: var(--nk-ink); font-variant-numeric: tabular-nums; }
.nk-bill-row--pink b { color: var(--nk-pink-deep); }
.nk-bill-row--douyin b { color: var(--nk-brand); }
.nk-bill-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 11px 13px; border-radius: 11px;
  background: linear-gradient(135deg, var(--nk-brand) 0%, var(--nk-brand-deep) 100%);
  color: #fff; font-size: 13px; font-weight: 600;
}
.nk-bill-total b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.nk-floatcard {
  position: absolute; z-index: 3; right: -14px; bottom: -30px;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: 14px;
  background: #fff; box-shadow: 0 18px 40px rgba(13, 77, 46, .26);
  border: 1px solid rgba(27, 122, 74, .10);
  animation: nk-float 5.5s ease-in-out infinite;
}
@keyframes nk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.nk-floatcard-main { display: flex; flex-direction: column; line-height: 1.15; }
.nk-floatcard-label { font-size: 11px; color: var(--nk-ink-mute); }
.nk-floatcard-num {
  font-size: 21px; font-weight: 800; color: var(--nk-ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.nk-floatcard-bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.nk-floatcard-bars i {
  width: 6px; height: var(--h); border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--nk-brand-light), var(--nk-brand-tint));
}
.nk-floatcard-bars i:last-child { background: linear-gradient(180deg, var(--nk-pink), #F9D3DC); }
.nk-floatcard-up { font-size: 12px; font-weight: 800; color: var(--nk-brand); }
@media (max-width: 479px) { .nk-floatcard { display: none; } }

/* 对比表格 -------------------------------------------------------------- */
.nk-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nk-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14.5px; }
.nk-table thead th {
  background: linear-gradient(135deg, var(--nk-brand) 0%, var(--nk-brand-mid) 100%);
  color: #fff; font-weight: 700; text-align: left;
  padding: 18px 20px; font-size: 15px; letter-spacing: .01em;
  vertical-align: middle;
}
.nk-table thead th:first-child { width: 15%; }
.nk-table thead th:nth-child(2) { width: 38%; background: #E9EEEB; color: #44554B; }
.nk-table thead th.nk-th-hl {
  width: 47%; position: relative;
  background: linear-gradient(135deg, var(--nk-brand-light) 0%, var(--nk-brand) 100%);
}
.nk-table thead th.nk-th-hl::after {
  content: "推荐"; position: absolute; top: 8px; right: 14px;
  background: var(--nk-pink); color: #6A2437;
  font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
}
.nk-table tbody th,
.nk-table tbody td {
  padding: 16px 20px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(27, 122, 74, .10); line-height: 1.7;
}
.nk-table tbody th {
  font-weight: 700; color: var(--nk-ink); background: var(--nk-brand-soft);
  white-space: nowrap;
}
.nk-table tbody td { color: var(--nk-ink-soft); }
.nk-table tbody td.nk-td-hl {
  color: var(--nk-brand-mid); font-weight: 600;
  background: rgba(228, 241, 233, .55);
  box-shadow: inset 3px 0 0 var(--nk-brand-light);
}
.nk-table tbody tr { transition: background-color .18s var(--nk-ease); }
.nk-table tbody tr:hover th { background: var(--nk-brand-tint); }
.nk-table tbody tr:hover td { background: rgba(228, 241, 233, .85); color: var(--nk-ink); }
.nk-table tbody tr:hover td.nk-td-hl { background: rgba(207, 232, 217, .95); color: var(--nk-brand-deep); }
.nk-table tbody tr:last-child th,
.nk-table tbody tr:last-child td { border-bottom: none; }
.nk-strike { text-decoration: line-through; text-decoration-color: var(--nk-pink-deep); text-decoration-thickness: 2px; color: var(--nk-pink-deep); font-weight: 700; }

/* 节省测算 -------------------------------------------------------------- */
.nk-save {
  background: #fff; border-radius: var(--nk-radius); padding: 28px 26px;
  border: 1px solid rgba(27, 122, 74, .10); box-shadow: var(--nk-shadow);
}
.nk-bars { margin-top: 22px; display: grid; gap: 16px; }
.nk-bar-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) 82px; align-items: center; gap: 12px; }
@media (max-width: 479px) { .nk-bar-row { grid-template-columns: 88px minmax(0, 1fr) 70px; gap: 8px; } }
.nk-bar-label { font-size: 13px; font-weight: 600; color: var(--nk-ink-soft); }
.nk-bar-track { display: block; height: 12px; border-radius: 999px; background: var(--nk-brand-soft); overflow: hidden; }
.nk-bar-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  transition: width 1s var(--nk-ease) .1s;
}
.nk-bar-fill--bad  { background: linear-gradient(90deg, var(--nk-pink), var(--nk-pink-deep)); }
.nk-bar-fill--good { background: linear-gradient(90deg, var(--nk-brand-light), var(--nk-brand)); }
.nk-bar-num { font-size: 13.5px; font-weight: 800; color: var(--nk-ink); text-align: right; font-variant-numeric: tabular-nums; }
.nk-bar-num--good { color: var(--nk-brand); }

.nk-savecard {
  position: relative; overflow: hidden;
  background: #fff; border-radius: var(--nk-radius); padding: 24px;
  border: 1px solid rgba(244, 167, 185, .45); box-shadow: var(--nk-shadow);
}
.nk-savecard::after {
  content: ""; position: absolute; right: -34px; top: -34px;
  width: 108px; height: 108px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 167, 185, .38), transparent 70%);
}
.nk-savecard--deep {
  background: linear-gradient(135deg, var(--nk-brand) 0%, var(--nk-brand-deep) 100%);
  border-color: transparent;
}
.nk-savecard--deep::after { background: radial-gradient(circle, rgba(244, 167, 185, .30), transparent 70%); }
.nk-savecard-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--nk-pink); color: #6A2437; font-size: 12px; font-weight: 800;
}
.nk-savecard-num {
  margin-top: 12px; font-size: 32px; font-weight: 800; letter-spacing: -.02em;
  color: var(--nk-ink); line-height: 1.15;
}
.nk-savecard--deep .nk-savecard-num { color: #fff; }
.nk-savecard-text { margin-top: 8px; font-size: 13.5px; line-height: 1.75; color: var(--nk-ink-soft); }
.nk-savecard-text--light { color: rgba(255, 255, 255, .80); }

/* 售后服务 -------------------------------------------------------------- */
.nk-svc-no {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(145deg, var(--nk-pink), #EE8FA6);
  color: #6A2437; font-size: 16px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(217, 120, 143, .32);
  font-variant-numeric: tabular-nums;
}
.nk-svc-list { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(27, 122, 74, .20); display: grid; gap: 8px; }
.nk-svc-list li {
  position: relative; padding-left: 20px; font-size: 13px; color: var(--nk-ink-soft); line-height: 1.6;
}
.nk-svc-list li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg);
  background: var(--nk-brand-light);
}

.nk-terminals {
  margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.nk-terminal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; background: #fff;
  border: 1px solid rgba(27, 122, 74, .14);
  font-size: 13.5px; font-weight: 600; color: var(--nk-ink-soft);
  box-shadow: 0 2px 10px rgba(27, 122, 74, .06);
  transition: transform .2s var(--nk-ease), color .2s var(--nk-ease), border-color .2s var(--nk-ease);
}
.nk-terminal:hover { transform: translateY(-2px); color: var(--nk-brand); border-color: rgba(27, 122, 74, .34); }
.nk-terminal svg { width: 18px; height: 18px; color: var(--nk-brand); }

/* 客户案例 -------------------------------------------------------------- */
.nk-case {
  display: grid; gap: 22px;
  background: #fff; border-radius: var(--nk-radius);
  border: 1px solid rgba(27, 122, 74, .10); box-shadow: var(--nk-shadow);
  padding: 26px 24px;
  transition: box-shadow .2s var(--nk-ease), border-color .2s var(--nk-ease), transform .2s var(--nk-ease);
}
.nk-case:hover { box-shadow: var(--nk-shadow-lg); border-color: rgba(27, 122, 74, .24); transform: translateY(-3px); }
@media (min-width: 1024px) {
  .nk-case { grid-template-columns: 250px minmax(0, 1fr); gap: 30px; padding: 30px 32px; }
}
.nk-case-side {
  position: relative; padding-bottom: 20px;
  border-bottom: 1px dashed rgba(27, 122, 74, .22);
}
@media (min-width: 1024px) {
  .nk-case-side { border-bottom: none; border-right: 1px dashed rgba(27, 122, 74, .22); padding: 0 26px 0 0; }
}
.nk-case-no {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--nk-brand); background: var(--nk-brand-tint);
  padding: 4px 11px; border-radius: 999px;
}
.nk-case-name {
  margin-top: 12px; font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: var(--nk-ink); line-height: 1.4;
}
.nk-case-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.nk-case-tags .nk-chip { margin-top: 0; }

.nk-case-body { display: grid; gap: 20px; }
@media (min-width: 768px)  { .nk-case-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.nk-case-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: var(--nk-ink);
  margin-bottom: 9px;
}
.nk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.nk-dot--mute  { background: #B9C6BE; }
.nk-dot--brand { background: var(--nk-brand-light); }
.nk-dot--pink  { background: var(--nk-pink-deep); }
.nk-case-col p { font-size: 13.8px; line-height: 1.9; color: var(--nk-ink-soft); }
.nk-case-col--result {
  background: linear-gradient(180deg, rgba(243, 248, 245, .9), rgba(253, 239, 243, .55));
  border-radius: 13px; padding: 14px 16px; margin: -14px -16px;
}
@media (min-width: 768px) { .nk-case-col--result { margin: -14px -16px -14px 0; padding: 14px 18px; } }
.nk-case-col--result p { color: var(--nk-ink); font-weight: 500; }
.nk-case-col--result mark {
  background: linear-gradient(180deg, transparent 58%, rgba(244, 167, 185, .65) 58%);
  color: var(--nk-ink); font-weight: 800; padding: 0 1px; border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

/* 常见问题 -------------------------------------------------------------- */
.nk-faq-cols { gap: 20px; }
@media (min-width: 1024px) {
  .nk-faq-cols { columns: 2; column-gap: 24px; }
  .nk-faq-cols > .nk-qa { break-inside: avoid; margin-bottom: 24px; }
}
@media (max-width: 1023px) { .nk-faq-cols { display: grid; } }

.nk-qa {
  background: #fff; border-radius: var(--nk-radius); padding: 22px 24px;
  border: 1px solid rgba(27, 122, 74, .10); box-shadow: var(--nk-shadow);
  border-left: 3px solid rgba(27, 122, 74, .28);
  transition: border-color .2s var(--nk-ease), box-shadow .2s var(--nk-ease), transform .2s var(--nk-ease);
}
.nk-qa:hover {
  border-left-color: var(--nk-pink);
  box-shadow: var(--nk-shadow-lg); transform: translateY(-2px);
}
.nk-qa-q {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15.5px; font-weight: 700; line-height: 1.6; color: var(--nk-brand-mid);
  letter-spacing: -.005em;
}
.nk-qa-no {
  flex: none; display: grid; place-items: center;
  min-width: 26px; height: 22px; padding: 0 6px; margin-top: 2px;
  border-radius: 7px; background: var(--nk-brand-tint); color: var(--nk-brand);
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.nk-qa-a {
  margin: 11px 0 0 37px; font-size: 14.2px; line-height: 1.9; color: var(--nk-ink-soft);
}
@media (max-width: 479px) { .nk-qa-a { margin-left: 0; } }

/* 底部 CTA -------------------------------------------------------------- */
.nk-cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(46, 170, 106, .42), transparent 65%),
    linear-gradient(135deg, #1B7A4A 0%, #146039 48%, #0D4D2E 100%);
}
.nk-advgrid {
  margin-top: 44px; display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .nk-advgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nk-advgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.nk-adv {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 14px 12px; border-radius: 13px;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 600; line-height: 1.4;
  text-align: left; transition: background-color .2s var(--nk-ease), transform .2s var(--nk-ease);
}
.nk-adv:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }
.nk-adv > span { font-size: 13px; flex: none; }

/* 滚动揭示动效 —— 仅在 JS 可用时生效，失败即保持可见 ---------------------- */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .3s var(--nk-ease), transform .3s var(--nk-ease);
}
.js .reveal.is-visible .nk-bar-fill { width: var(--w, 0%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .nk-card--store:hover, .nk-card--feat:hover, .nk-svc:hover,
  .nk-case:hover, .nk-qa:hover, .nk-btn:hover, .nk-floatcard { transform: none !important; }
}

/* 打印 */
@media print {
  .nk-header, .nk-cta, .nk-tiles, .nk-floatcard, .nk-skip { display: none !important; }
  .nk-hero { background: #fff !important; color: #000 !important; }
  .nk-section { padding-block: 20px !important; }
  .nk-card, .nk-qa, .nk-case { box-shadow: none !important; border: 1px solid #ccc !important; }
}