/**
 * Rola IP — netnut.io 对标样式（nn-* 前缀）
 */
:root {
  /* 主题色：纯正蓝 */
  --nn-green: #3B82F6;
  --nn-green-dark: #2563EB;
  --nn-green-light: #DBEAFE;
  --nn-dark: #0B1533;
  --nn-dark-2: #102A5C;
  --nn-text: #1e293b;
  --nn-muted: #5b6b8a;
  --nn-border: #D0E0FF;
  --nn-surface: #F0F5FF;
  --nn-white: #fff;
  --nn-radius: 12px;
  --nn-radius-lg: 16px;
  --nn-shadow: 0 4px 24px rgba(12, 31, 51, 0.08);
  --nn-wrap: 1200px;
  --nn-font: 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.nn-body {
  margin: 0;
  font-family: var(--nn-font);
  color: var(--nn-text);
  line-height: 1.6;
  background: var(--nn-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--nn-green); text-decoration: none; }
a:hover { color: var(--nn-green-dark); }
.nn-wrap { width: min(100% - 2rem, var(--nn-wrap)); margin-inline: auto; }

/* —— 按钮 —— */
.nn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .9375rem;
  border: 2px solid transparent; cursor: pointer; transition: .2s;
}
.nn-btn--primary { background: var(--nn-green); color: #fff; border-color: var(--nn-green); }
.nn-btn--primary:hover { background: var(--nn-green-dark); border-color: var(--nn-green-dark); color: #fff; }
.nn-btn--outline { background: transparent; color: var(--nn-green); border-color: var(--nn-green); }
.nn-btn--outline:hover { background: var(--nn-green-light); }
.nn-btn--ghost { background: transparent; color: var(--nn-text); border-color: var(--nn-border); }
.nn-btn--ghost:hover { border-color: var(--nn-green); color: var(--nn-green); }
.nn-btn--lg { padding: .85rem 1.75rem; font-size: 1rem; }
.nn-btn--sm { padding: .45rem 1rem; font-size: .875rem; }
.nn-link { font-weight: 600; }

.nn-tag {
  display: inline-block; padding: .2rem .6rem; border-radius: 6px;
  background: var(--nn-green-light); color: var(--nn-green); font-size: .75rem; font-weight: 700;
}
.nn-tag--hero { margin-bottom: .75rem; }

/* —— Header —— */
.nn-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nn-border);
}
.nn-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 80px; }
.nn-logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 26px; color: var(--nn-text); flex-shrink: 0; }
.nn-logo img { height: 40px; width: auto; display: block; }
.nn-logo:hover { color: var(--nn-text); }
.nn-toggle {
  display: none; margin-left: auto; width: 40px; height: 40px; border: none; background: none; cursor: pointer; padding: 0;
}
.nn-toggle span { display: block; height: 2px; background: var(--nn-text); margin: 6px 4px; border-radius: 1px; }

.nn-nav { display: flex; align-items: center; flex: 1; margin-left: 1.5rem; }
.nn-nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; flex: 1; }
.nn-nav__btn, .nn-nav__link {
  display: flex; align-items: center; gap: .35rem; padding: .55rem .85rem;
  border: none; background: none; font: inherit; font-size: 18px; color: var(--nn-text); cursor: pointer; border-radius: 8px;
}
.nn-nav__btn:hover, .nn-nav__link:hover { background: var(--nn-surface); color: var(--nn-green); }
.nn-nav__chev { width: 11px; height: 7px; }
.nn-header__actions { display: flex; gap: .6rem; margin-left: auto; align-items: center; }
/* 顶栏按钮：登录 18px，注册 16px（对齐 netnut 参考尺寸） */
.nn-header__actions .nn-btn--ghost.nn-btn--sm { font-size: 18px; padding: .5rem 1.1rem; }
.nn-header__actions .nn-btn--primary.nn-btn--sm { font-size: 16px; padding: .5rem 1.15rem; }

/* Mega menu */
.nn-nav__item { position: relative; }
.nn-mega {
  position: absolute; left: 50%; transform: translateX(-50%); top: 100%;
  min-width: 640px; padding-top: .5rem; opacity: 0; visibility: hidden; pointer-events: none; transition: .2s;
}
.nn-nav__item:hover .nn-mega, .nn-nav__item.is-open .nn-mega { opacity: 1; visibility: visible; pointer-events: auto; }
.nn-mega__inner {
  display: grid; grid-template-columns: 1fr 1fr 200px; gap: 1.5rem;
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius-lg);
  padding: 1.5rem; box-shadow: var(--nn-shadow);
}
.nn-mega--narrow .nn-mega__inner { grid-template-columns: 1fr; min-width: 280px; }
.nn-mega__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--nn-muted); margin: 0 0 .75rem; letter-spacing: .04em; }
.nn-mega__link { display: block; padding: .5rem 0; color: var(--nn-text); }
.nn-mega__link strong { display: block; font-size: .9375rem; }
.nn-mega__link span { font-size: .8125rem; color: var(--nn-muted); }
.nn-mega__link:hover strong { color: var(--nn-green); }
.nn-mega__link--all { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--nn-border); }
.nn-mega__cta { background: var(--nn-surface); border-radius: var(--nn-radius); padding: 1rem; font-size: .875rem; }
.nn-mega__cta p { margin: 0 0 .5rem; }

/* —— Hero —— */
.nn-hero {
  background: linear-gradient(135deg, var(--nn-dark) 0%, var(--nn-dark-2) 100%);
  color: #fff; padding: 4rem 0 5rem; overflow: hidden; position: relative;
}
.nn-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: center; }
.nn-hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; margin: 0 0 1rem; font-weight: 800; }
.nn-hero h1 em { font-style: normal; color: var(--nn-green); }
.nn-hero__lead { font-size: 1.125rem; color: rgba(255,255,255,.85); margin: 0 0 1.5rem; max-width: 32rem; }
.nn-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
/* 深色 Hero：ghost 按钮白字白边 */
.nn-hero .nn-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.nn-hero .nn-btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .1); }
.nn-hero__stat { font-size: 2.5rem; font-weight: 800; color: var(--nn-green); }
.nn-hero__stat-label { font-size: .875rem; color: rgba(255,255,255,.7); }
.nn-hero__visual { position: relative; display: flex; align-items: center; justify-content: flex-end; }
/* Hero 左侧地球/轨道图 */
.nn-hero__visual img { width: 100%; max-width: 620px; height: auto; }
.nn-hero__content { justify-self: start; }

/* —— Section 通用 —— */
.nn-section { padding: 4.5rem 0; }
.nn-section--alt { background: var(--nn-surface); }
.nn-section--dark { background: var(--nn-dark); color: #fff; }
.nn-section-head { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.nn-section-head h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 .75rem; font-weight: 800; }
.nn-section-head p { color: var(--nn-muted); margin: 0; font-size: 1.0625rem; }
.nn-section--dark .nn-section-head p { color: rgba(255,255,255,.7); }

/* —— 信任条 —— */
.nn-trust { padding: 2rem 0; border-bottom: 1px solid var(--nn-border); }
.nn-trust__label { text-align: center; font-size: .875rem; color: var(--nn-muted); margin: 0 0 1.25rem; }
.nn-trust__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; align-items: center; }
/* 客户/媒体 logo：加深灰色字形，避免白底上几乎看不见 */
.nn-trust__logos--img img {
  height: 28px; width: auto; max-width: 140px; object-fit: contain;
  filter: grayscale(1) brightness(0.42); opacity: 1;
}
.nn-trust__logos--img img:hover { filter: grayscale(0) brightness(1); opacity: 1; }

/* —— 产品卡 —— */
.nn-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.nn-product-card {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius-lg);
  padding: 1.5rem; transition: .2s; position: relative;
}
.nn-product-card:hover { border-color: var(--nn-green); box-shadow: var(--nn-shadow); transform: translateY(-2px); }
.nn-product-card--featured { border-color: var(--nn-green); background: linear-gradient(180deg, var(--nn-green-light), var(--nn-white)); }
.nn-product-card__icon { width: 48px; height: 48px; margin-bottom: 1rem; display: block; }
.nn-product-card h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.nn-product-card p { margin: 0; font-size: .875rem; color: var(--nn-muted); line-height: 1.5; }
.nn-product-card__badge { position: absolute; top: 1rem; right: 1rem; }

/* —— Benefits 跑马灯 —— */
.nn-benefits-marquee { overflow: hidden; padding: 2rem 0; background: var(--nn-dark); color: #fff; }
.nn-benefits-track {
  display: flex; width: max-content;
  will-change: transform; backface-visibility: hidden;
  animation: nn-benefits-scroll var(--nn-marquee-duration, 35s) linear infinite;
}
.nn-benefits-group {
  display: flex; align-items: center; gap: 3rem; padding-right: 3rem; flex-shrink: 0;
}
.nn-benefits-group span { white-space: nowrap; font-weight: 600; font-size: 1.125rem; opacity: .9; }
@keyframes nn-benefits-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--nn-marquee-shift, 50%)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nn-benefits-track { animation-duration: 60s; }
}

/* —— Setup —— */
.nn-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.nn-setup__list { list-style: none; padding: 0; margin: 0; }
.nn-setup__list li { padding: .75rem 0 .75rem 2rem; position: relative; border-bottom: 1px solid var(--nn-border); }
.nn-setup__list li::before { content: '✓'; position: absolute; left: 0; color: var(--nn-green); font-weight: 700; }
.nn-setup__visual { border-radius: var(--nn-radius-lg); overflow: hidden; }
.nn-setup__visual img { width: 100%; height: auto; display: block; }

/* —— Scraper 卡 —— */
.nn-scraper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.nn-scraper-card {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius);
  padding: 1.25rem; transition: .2s;
}
.nn-scraper-card:hover { border-color: var(--nn-green); }
.nn-scraper-card img { margin-bottom: .75rem; }
.nn-scraper-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.nn-scraper-card p { margin: 0; font-size: .8125rem; color: var(--nn-muted); }
.nn-scraper-card__price { display: inline-block; margin-top: .75rem; font-size: .8125rem; font-weight: 600; color: var(--nn-green); }

/* —— KPI —— */
.nn-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.nn-kpi__val { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--nn-green); display: block; }
.nn-kpi__label { font-size: .875rem; color: var(--nn-muted); }
.nn-section--dark .nn-kpi__label { color: rgba(255,255,255,.7); }
.nn-section--dark .nn-kpi__val { color: #fff; }

/* —— Use cases —— */
.nn-use-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.nn-use-card {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius);
  padding: 1.25rem; color: var(--nn-text); transition: .2s;
  border-left: 3px solid transparent;
}
.nn-use-card:hover { border-color: var(--nn-green); border-left-color: var(--nn-green); color: var(--nn-green); }
.nn-use-card h3 { margin: 0 0 .5rem; font-size: .9375rem; }
.nn-use-card span { font-size: .8125rem; color: var(--nn-muted); }

/* AI 集成区块 */
.nn-ai-block { text-align: center; }
.nn-ai-block h2 { margin: 0 0 .75rem; }
.nn-ai-block__lead { color: rgba(255,255,255,.75); max-width: 36rem; margin: 0 auto 1.5rem; }
.nn-ai-block__img { max-width: 100%; height: auto; margin: 0 auto 1.5rem; display: block; opacity: .9; }
.nn-ai-block__note { margin-top: 1.5rem; color: rgba(255,255,255,.5); font-size: .875rem; }

/* 成功率 + 网络图 */
.nn-rates-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 3rem; max-width: 1000px; margin-inline: auto;
}
.nn-rates__illus {
  flex: 0 1 520px; width: 52%; max-width: 520px; height: auto;
  border-radius: var(--nn-radius-lg); display: block;
}
.nn-rates {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 1.75rem;
  margin-left: auto; padding-right: .5rem; min-width: 200px;
}
.nn-rates > div { text-align: left; }
.nn-rates__val { font-size: 3rem; font-weight: 800; color: var(--nn-green); }
.nn-rates__label { font-size: .9375rem; color: var(--nn-muted); }

/* —— Testimonials —— */
.nn-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.nn-testimonial {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius-lg);
  padding: 1.5rem; position: relative;
}
.nn-testimonial::before {
  content: '\201C'; position: absolute; top: .75rem; left: 1rem;
  font-size: 2.5rem; line-height: 1; color: var(--nn-green); opacity: .35; font-family: Georgia, serif;
}
.nn-testimonial__stars { color: #ffb400; font-size: .875rem; letter-spacing: .1em; margin-bottom: .75rem; }
.nn-testimonial p { font-size: .9375rem; margin: 0 0 1rem; font-style: italic; color: var(--nn-muted); padding-top: 1.25rem; }
.nn-testimonial strong { display: block; font-size: .875rem; }
.nn-testimonial span { font-size: .8125rem; color: var(--nn-muted); }

/* 控制台 */
.nn-dashboard-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.nn-dashboard__shot { width: 100%; height: auto; border-radius: var(--nn-radius-lg); box-shadow: var(--nn-shadow); }
.nn-dashboard-feats { display: flex; flex-direction: column; gap: 1.25rem; }
.nn-dash-feat { display: flex; gap: 1rem; align-items: flex-start; text-align: left; padding: 0; }
.nn-dash-feat img { flex-shrink: 0; }
.nn-dash-feat h3 { margin: 0 0 .35rem; font-size: 1rem; }
.nn-dash-feat p { margin: 0; font-size: .875rem; color: var(--nn-muted); }

/* —— Locations —— */
.nn-loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.nn-loc-card {
  display: flex; flex-direction: column; gap: .35rem; padding: 1rem;
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius);
  color: var(--nn-text); transition: .2s;
}
.nn-loc-card__flag { width: 40px; height: auto; border-radius: 4px; margin-bottom: .25rem; }
.nn-loc-card:hover { border-color: var(--nn-green); }

/* —— Pricing compare —— */
.nn-pricing-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.nn-pricing-col {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius-lg);
  padding: 1.5rem; text-align: center;
}
.nn-pricing-col--brand { border-color: var(--nn-green); background: var(--nn-green-light); }
.nn-pricing-col h3 { margin: 0 0 1rem; font-size: 1rem; }
.nn-pricing-col__row { padding: .75rem 0; border-bottom: 1px solid var(--nn-border); }
.nn-pricing-col__price { font-size: 1.5rem; font-weight: 800; color: var(--nn-green); }

/* —— FAQ —— */
.nn-faq__item { border-bottom: 1px solid var(--nn-border); padding: 1rem 0; }
.nn-faq__item summary { font-weight: 600; cursor: pointer; list-style: none; }
.nn-faq__item summary::-webkit-details-marker { display: none; }
.nn-faq__item p { margin: .75rem 0 0; color: var(--nn-muted); font-size: .9375rem; }

/* —— CTA band —— */
.nn-cta-band {
  background: linear-gradient(135deg, var(--nn-dark), var(--nn-dark-2));
  color: #fff; padding: 4rem 0; text-align: center;
}
.nn-cta-band h2 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.nn-cta-band p { margin: 0 0 1.5rem; color: rgba(255,255,255,.8); }
.nn-cta-band__btns { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
/* 深色底栏：ghost 按钮改为白字白边，避免与背景对比不足 */
.nn-cta-band .nn-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .75);
}
.nn-cta-band .nn-btn--ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* —— 内页 —— */
.nn-page-hero {
  background: linear-gradient(180deg, var(--nn-surface) 0%, var(--nn-white) 100%);
  padding: 2.5rem 0 3rem; border-bottom: 1px solid var(--nn-border);
}
.nn-loc-card span:last-child { font-size: .8125rem; color: var(--nn-muted); }
.nn-loc-card__code { font-size: .75rem; font-weight: 700; color: var(--nn-muted); letter-spacing: .04em; }

/* 产品页 Hero：单列居中，无右侧配图 */
.nn-prod-hero {
  padding: 4rem 0 4.5rem;
  background: linear-gradient(180deg, var(--nn-surface) 0%, var(--nn-white) 100%);
  border-bottom: 1px solid var(--nn-border);
  text-align: center;
}
.nn-prod-hero__grid {
  max-width: 52rem; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
}
.nn-prod-hero .nn-tag--hero { margin-bottom: .75rem; }
.nn-page-hero h1, .nn-prod-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem); margin: .5rem 0 1rem; font-weight: 800; line-height: 1.15;
}
.nn-page-hero__lead, .nn-prod-hero__lead {
  font-size: 1.25rem; color: var(--nn-muted); max-width: 44rem; margin: 0 auto 1.75rem; line-height: 1.75;
}
.nn-page-hero__cta, .nn-prod-hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.nn-bc { font-size: .875rem; color: var(--nn-muted); margin-bottom: .5rem; }
.nn-bc a { color: var(--nn-muted); }
.nn-bc span { margin: 0 .35rem; }
.nn-prod-hero__checks {
  list-style: none; padding: 0; margin: 0 0 1.75rem;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
.nn-prod-hero__checks li {
  display: flex; align-items: center; gap: .5rem; padding: .35rem 0;
  color: var(--nn-muted); font-size: 1.0625rem; justify-content: center;
}
.nn-prod-hero__checks svg { color: var(--nn-green); flex-shrink: 0; width: 22px; height: 22px; }
/* 产品页 Hero 数据条 */
.nn-prod-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  width: 100%; max-width: 42rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--nn-border);
}
.nn-prod-stat { text-align: center; }
.nn-prod-stat strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--nn-green); }
.nn-prod-stat span { font-size: .8125rem; color: var(--nn-muted); }

/* 产品页双栏特性区块 */
.nn-prod-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.nn-prod-split--reverse .nn-prod-split__content { order: 2; }
.nn-prod-split--reverse .nn-prod-split__visual { order: 1; }
.nn-prod-split h2 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin: 0 0 .75rem; font-weight: 800; }
.nn-prod-split p { color: var(--nn-muted); margin: 0 0 1rem; line-height: 1.75; }
.nn-prod-split ul { margin: 0 0 1.25rem; padding-left: 1.15rem; color: var(--nn-muted); line-height: 1.75; }
.nn-prod-split li { margin-bottom: .35rem; }
.nn-prod-split__cta { display: flex; gap: .6rem; flex-wrap: wrap; }
.nn-prod-split__visual {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius-lg);
  padding: 1.25rem; box-shadow: var(--nn-shadow);
}
/* 产品页 mock 控件（会话/代码/地理） */
.nn-mock-session__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .65rem .85rem; border-radius: 8px; background: var(--nn-surface); margin-bottom: .5rem;
  font-size: .875rem;
}
.nn-mock-session__row span:last-child { font-weight: 600; color: var(--nn-green); }
.nn-mock-code {
  background: var(--nn-dark); color: #e8ecf4; border-radius: 8px; overflow: hidden; font-family: 'JetBrains Mono', monospace; font-size: .8125rem;
}
.nn-mock-code__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem .75rem; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08);
}
.nn-mock-code pre { margin: 0; padding: .85rem .75rem; overflow-x: auto; }
.nn-mock-loc { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nn-mock-loc__item {
  padding: .65rem; border-radius: 8px; background: var(--nn-surface); font-size: .8125rem;
}
.nn-mock-loc__item strong { display: block; color: var(--nn-text); }
.nn-mock-loc__item span { color: var(--nn-muted); font-size: .75rem; }

/* 定价卡片增强 */
.nn-pricing-block { background: var(--nn-white); }
.nn-pricing-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.nn-pricing-card {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius-lg);
  padding: 1.5rem 1.25rem; text-align: center; position: relative; transition: .2s;
}
.nn-pricing-card:hover { border-color: var(--nn-green); box-shadow: var(--nn-shadow); transform: translateY(-2px); }
.nn-pricing-card--pop { border-color: var(--nn-green); background: linear-gradient(180deg, var(--nn-green-light), var(--nn-white)); }
.nn-pricing-card .nn-tag { position: absolute; top: -.65rem; left: 50%; transform: translateX(-50%); }
.nn-pricing-card h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--nn-muted); font-weight: 600; }
.nn-pricing-card__price { font-size: 1.75rem; font-weight: 800; color: var(--nn-green); margin: 0 0 .25rem; }
.nn-pricing-card__unit { font-size: .8125rem; color: var(--nn-muted); margin: 0 0 .5rem; }
.nn-pricing-card__desc { font-size: .8125rem; color: var(--nn-muted); margin: 0 0 1.25rem; min-height: 2.5em; }
.nn-prod-price-hl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem;
}
.nn-prod-price-hl__card {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem;
  background: var(--nn-surface); border: 1px solid var(--nn-border); border-radius: var(--nn-radius);
}
.nn-prod-price-hl__icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
  background: var(--nn-green-light); color: var(--nn-green);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700;
}
.nn-prod-price-hl__card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.nn-prod-price-hl__card p { margin: 0; font-size: .875rem; color: var(--nn-muted); line-height: 1.55; }

/* 产品页热门节点 */
.nn-prod-locs { padding-top: 0; }
.nn-prod-locs .nn-loc-grid { margin-bottom: 1.5rem; }
.nn-prod-locs__cta { text-align: center; }

.nn-feats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.nn-feat-card {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius);
  padding: 1.25rem; transition: .2s; border-top: 3px solid transparent;
}
.nn-feat-card:hover { border-top-color: var(--nn-green); box-shadow: var(--nn-shadow); }
.nn-feat-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.nn-feat-card p { margin: 0; font-size: .875rem; color: var(--nn-muted); line-height: 1.55; }

/* 产品页关联场景 */
.nn-prod-use { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.nn-prod-use__card {
  padding: 1.15rem 1.25rem; border: 1px solid var(--nn-border); border-radius: var(--nn-radius);
  color: var(--nn-text); transition: .2s;
}
.nn-prod-use__card:hover { border-color: var(--nn-green); color: var(--nn-green); }
.nn-prod-use__card h3 { margin: 0 0 .35rem; font-size: .9375rem; }
.nn-prod-use__card span { font-size: .8125rem; color: var(--nn-muted); }

.nn-pricing-table { border: 1px solid var(--nn-border); border-radius: var(--nn-radius); overflow: hidden; }
.nn-pricing-row { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 1rem 1.25rem; border-bottom: 1px solid var(--nn-border); align-items: center; }
.nn-pricing-row--head { background: var(--nn-surface); font-weight: 700; }
.nn-pricing-row:last-child { border-bottom: none; }

.nn-loc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
.nn-loc-stats strong { display: block; font-size: 2rem; color: var(--nn-green); }
.nn-loc-stats span { font-size: .875rem; color: var(--nn-muted); }

.nn-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.nn-contact__card { background: var(--nn-surface); border-radius: var(--nn-radius); padding: 1.5rem; }
.nn-contact__card h3 { margin: 0 0 .5rem; font-size: 1rem; }

.nn-blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.nn-blog-card {
  padding: 1.5rem; border: 1px solid var(--nn-border); border-radius: var(--nn-radius-lg);
  background: var(--nn-white); transition: .2s; display: flex; flex-direction: column;
}
.nn-blog-card:hover { border-color: var(--nn-green); box-shadow: var(--nn-shadow); transform: translateY(-2px); }
.nn-blog-card__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; font-size: .75rem; color: var(--nn-muted); }
.nn-blog-card__tag {
  display: inline-block; padding: .15rem .5rem; border-radius: 4px;
  background: var(--nn-green-light); color: var(--nn-green); font-weight: 600; font-size: .6875rem;
}
.nn-blog-card h3 { margin: 0 0 .5rem; font-size: 1.0625rem; line-height: 1.4; }
.nn-blog-card h3 a { color: var(--nn-text); }
.nn-blog-card h3 a:hover { color: var(--nn-green); }
.nn-blog-card p { margin: 0; color: var(--nn-muted); font-size: .875rem; flex: 1; }
.nn-blog-card__more { margin-top: 1rem; font-size: .8125rem; font-weight: 600; }

.nn-article { max-width: 44rem; margin: 0 auto; }
.nn-article h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; color: var(--nn-text); font-weight: 700; }
.nn-article h2:first-child { margin-top: 0; }
.nn-article h3 { font-size: 1.0625rem; margin: 1.5rem 0 .5rem; color: var(--nn-text); }
.nn-article p { color: var(--nn-muted); line-height: 1.85; margin: 0 0 1rem; }
.nn-article ul, .nn-article ol { color: var(--nn-muted); line-height: 1.85; margin: 0 0 1rem; padding-left: 1.25rem; }
.nn-article li { margin-bottom: .35rem; }
.nn-article blockquote {
  margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--nn-green);
  background: var(--nn-green-light); border-radius: 0 var(--nn-radius) var(--nn-radius) 0;
  color: var(--nn-text); font-size: .9375rem;
}

.nn-about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; text-align: center;
}
.nn-about-stat {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius);
  padding: 1.25rem;
}
.nn-about-stat strong { display: block; font-size: 1.75rem; color: var(--nn-green); margin-bottom: .25rem; }
.nn-about-stat span { font-size: .8125rem; color: var(--nn-muted); }

.nn-integ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.nn-integ-card {
  background: var(--nn-white); border: 1px solid var(--nn-border); border-radius: var(--nn-radius);
  padding: 1.25rem; text-align: center;
}
.nn-integ-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.nn-integ-card p { margin: 0; font-size: .8125rem; color: var(--nn-muted); }

.nn-about ul, .nn-legal p { color: var(--nn-muted); }
.nn-about p { color: var(--nn-muted); line-height: 1.85; margin: 0 0 1rem; }
.nn-article p { color: var(--nn-muted); line-height: 1.8; }

/* —— Footer —— */
.nn-footer { background: var(--nn-dark); color: rgba(255,255,255,.85); padding: 3.5rem 0 1.5rem; }
.nn-footer h4 { color: #fff; font-size: .875rem; margin: 0 0 1rem; }
.nn-footer ul { list-style: none; padding: 0; margin: 0; }
.nn-footer li { margin-bottom: .5rem; }
.nn-footer a { color: rgba(255,255,255,.7); font-size: .875rem; }
.nn-footer a:hover { color: var(--nn-green); }
.nn-footer__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
.nn-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; gap: 1rem; }
.nn-footer__logo { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; }
.nn-footer__logo img { height: 28px; width: auto; }
.nn-footer__copy { margin: 0; font-size: .8125rem; color: rgba(255,255,255,.5); }

/* —— Reveal 动画 —— */
.nn-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; }
.nn-reveal.is-visible { opacity: 1; transform: none; }

/* —— 响应式 —— */
@media (max-width: 1024px) {
  .nn-hero__grid, .nn-setup, .nn-products, .nn-dashboard-layout, .nn-prod-split, .nn-prod-split--reverse { grid-template-columns: 1fr; }
  /* 移动端：文案在上、配图在下 */
  .nn-hero__content { order: 1; }
  .nn-hero__visual { order: 2; justify-content: center; }
  .nn-prod-split--reverse .nn-prod-split__content, .nn-prod-split--reverse .nn-prod-split__visual { order: unset; }
  .nn-prod-stats { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .nn-prod-price-hl { grid-template-columns: 1fr; }
  .nn-rates-wrap { flex-direction: column; align-items: stretch; }
  .nn-rates__illus { width: 100%; max-width: none; }
  .nn-rates { margin-left: 0; padding-right: 0; }
  .nn-scraper-grid, .nn-kpi, .nn-use-grid, .nn-testimonials, .nn-dashboard-feats, .nn-loc-grid, .nn-pricing-compare, .nn-feats-grid, .nn-pricing-cards, .nn-blog-list, .nn-integ-grid, .nn-about-stats, .nn-prod-use { grid-template-columns: repeat(2, 1fr); }
  .nn-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .nn-mega { min-width: 90vw; left: 0; transform: none; }
  .nn-mega__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nn-toggle { display: block; }
  .nn-nav {
    position: fixed; inset: 80px 0 0; background: var(--nn-white); flex-direction: column;
    padding: 1rem; transform: translateX(100%); transition: .3s; overflow-y: auto;
  }
  .nn-nav.is-open { transform: translateX(0); }
  .nn-nav__list { flex-direction: column; align-items: stretch; width: 100%; }
  .nn-mega { position: static; opacity: 1; visibility: visible; pointer-events: auto; min-width: 0; padding: 0; display: none; }
  .nn-nav__item.is-open .nn-mega { display: block; }
  .nn-mega__inner { grid-template-columns: 1fr; box-shadow: none; border: none; padding: .5rem 0 1rem 1rem; }
  .nn-header__actions { width: 100%; margin: 1rem 0 0; }
  .nn-rates, .nn-kpi, .nn-scraper-grid, .nn-use-grid, .nn-testimonials, .nn-dashboard-feats, .nn-loc-grid, .nn-pricing-compare, .nn-feats-grid, .nn-pricing-cards, .nn-contact, .nn-footer__grid, .nn-blog-list, .nn-integ-grid, .nn-about-stats, .nn-prod-stats, .nn-prod-use, .nn-prod-price-hl { grid-template-columns: 1fr; }
  .nn-dashboard-layout { grid-template-columns: 1fr; }
  .nn-pricing-row { grid-template-columns: 1fr; gap: .25rem; }
}