/* ==========================================================================
   掌域 GEO 官网 · 首页版式（home.css）
   仅 index.html 加载。分区：hero / 产品功能 / 优化课堂 / 客户场景 / 定价
   ========================================================================== */

/* ============================== 01 hero ============================== */
.hero{
  position:relative;
  overflow:hidden; /* 兜住光斑 */
  padding:var(--space-64) 0 var(--space-80);
  background:var(--color-surface);
}
/* 蓝紫光斑点缀（参考站浅渐变氛围） */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  width:520px;height:520px;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
}
.hero::before{background:var(--color-glow-blue);top:-180px;right:-120px}
.hero::after{background:var(--color-glow-violet);bottom:-260px;left:-160px}
.hero .container{position:relative;z-index:1}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:var(--space-64);
  align-items:center;
}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
/* 两级标题：「AI 时代」小字灰 + 「品牌可见度检测工具」超大字 */
.hero-kicker{
  margin-top:var(--space-20);
  font-size:clamp(1.125rem,1.6vw,1.375rem);
  line-height:1.4;
  font-weight:var(--weight-medium);
  color:var(--color-text-tertiary);
}
.hero-title{
  margin-top:var(--space-8);
  font-size:var(--font-size-h1);
  line-height:var(--lh-h1);
  font-weight:var(--weight-bold);
}
.hero-subtitle{
  margin-top:var(--space-12);
  font-size:clamp(1.25rem,2vw,1.5rem);
  line-height:1.4;
  font-weight:var(--weight-semibold);
  color:var(--color-primary);
}
.hero-lead{
  margin-top:var(--space-16);
  max-width:34em; /* 约 34 字/行 */
  color:var(--color-text-secondary);
}
.hero-actions{margin-top:var(--space-32)}
.hero-footnote{
  margin-top:var(--space-16);
  font-size:var(--font-size-caption);
  color:var(--color-text-tertiary);
}
.hero-vision{
  margin-top:var(--space-64);
  padding-top:var(--space-32);
  border-top:1px solid var(--color-border-soft);
  text-align:center;
  font-size:var(--font-size-caption);
  color:var(--color-text-tertiary);
}

/* —— 快照与水位示意（灰色散点收敛成蓝色曲线；一次性轻动画，reduced-motion 直接终态）—— */
.snapshot-figure{
  margin:0;
  background:var(--color-surface);
  border-radius:var(--radius-12);
  box-shadow:var(--shadow-card);
  padding:var(--space-24);
}
.snapshot-figure figcaption{margin-top:var(--space-8);text-align:right}
.snap-water{width:100%;height:auto}
.sw-start,.sw-dot{fill:var(--color-text-tertiary)}
.sw-start{fill:var(--color-primary)}
.sw-end{fill:var(--color-primary);stroke:var(--color-surface);stroke-width:3}
.sw-curve{
  fill:none;
  stroke:var(--color-primary);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sw-label{font-size:12px;fill:var(--color-text-secondary)}
/* 动画节奏：基线点与快照散点依次出现 → 水位曲线生长 → 终点与标签浮现 */
.sw-start,.sw-dot,.sw-end{
  opacity:0;
  animation:sw-pop .5s ease-out forwards;
  transform-box:fill-box;
  transform-origin:center;
}
.sw-curve{stroke-dasharray:100;stroke-dashoffset:100;animation:sw-draw 1.3s ease-in-out 1.35s forwards}
.sw-end{animation-delay:2.55s}
.sw-label{opacity:0;animation:sw-fade .5s ease-out forwards}
.sw-label-start{animation-delay:.1s}
.sw-label-snap{animation-delay:1.6s}
.sw-label-end{animation-delay:2.8s}
@keyframes sw-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sw-draw{to{stroke-dashoffset:0}}
@keyframes sw-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .snap-water .sw-start,.snap-water .sw-dot,.snap-water .sw-end,.snap-water .sw-label{animation:none;opacity:1;transform:none}
  .snap-water .sw-curve{animation:none;stroke-dashoffset:0}
}

/* 移动端：hero 单列、光斑隐藏 */
@media (max-width:767px){
  .hero{padding:var(--space-48) 0}
  .hero::before,.hero::after{display:none}
  .hero-grid{grid-template-columns:1fr;gap:var(--space-32)}
  .hero-vision{margin-top:var(--space-48)}
}
/* 平板：两列变窄由 clamp 处理；仪表盘卡留白收紧 */
@media (max-width:1199px){
  .hero-grid{gap:var(--space-32)}
}

/* ============================== 02 产品功能 ============================== */
.module-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-12);
  margin-bottom:var(--space-64);
}
.module{margin-top:var(--space-64)}
.module:first-of-type{margin-top:0}
.module-head{
  display:flex;
  align-items:center;
  gap:var(--space-16);
  margin-bottom:var(--space-32);
}
.module-name{
  font-size:var(--font-size-h3);
  line-height:var(--lh-h3);
  font-weight:var(--weight-semibold);
  white-space:nowrap;
}
.module-line{
  flex:1;
  height:1px;
  background:var(--color-border);
}
.module-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--card-gap);
}
.module-grid--4{grid-template-columns:repeat(4,1fr)}

@media (max-width:1199px){
  .module-grid,.module-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .module-grid,.module-grid--4{grid-template-columns:1fr}
  .module{margin-top:var(--space-48)}
  .module-name{white-space:normal}
}

/* ============================== 03 学习课堂（认知系列 + 实操系列） ============================== */
.series + .series{margin-top:var(--space-64)}
.series-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--space-8) var(--space-16);
  margin-bottom:var(--space-32);
}
.series-title{
  font-size:var(--font-size-h3);
  line-height:var(--lh-h3);
  font-weight:var(--weight-semibold);
}
.academy-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--card-gap);
}
.article-card .card-desc{margin-top:var(--space-8);flex:1}
.article-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:var(--space-16);
  font-size:var(--font-size-caption);
  font-weight:var(--weight-medium);
  color:var(--color-primary);
  transition:color .15s ease-out;
}
.article-more:hover{color:var(--color-primary-strong)}
.article-more svg{transition:transform .15s ease-out}
.article-more:hover svg{transform:translateX(3px)}
@media (max-width:1199px){
  .academy-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .academy-grid{grid-template-columns:1fr}
}

/* —— 学习课堂「查看全文」阅读弹窗 —— */
body.modal-open{overflow:hidden}
.article-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-24);
}
.article-modal[hidden]{display:none}
.article-modal-mask{position:absolute;inset:0;background:rgba(16,21,31,.5)}
.article-modal-panel{
  position:relative;
  width:100%;
  max-width:780px;
  max-height:86vh;
  display:flex;
  flex-direction:column;
  background:var(--color-surface);
  border-radius:var(--radius-12);
  box-shadow:0 24px 64px rgba(16,21,31,.24);
  overflow:hidden;
}
.article-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-16);
  padding:var(--space-24) var(--space-32) var(--space-16);
  border-bottom:1px solid var(--color-border-soft);
}
.article-modal-title{font-size:1.25rem;line-height:1.5;font-weight:var(--weight-semibold)}
.article-modal-close{
  width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-8);
  color:var(--color-text-tertiary);
  flex:none;
  transition:background-color .15s ease-out,color .15s ease-out;
}
.article-modal-close:hover{background:var(--color-surface-muted);color:var(--color-text-primary)}
.article-modal-body{overflow-y:auto;padding:var(--space-24) var(--space-32) var(--space-32)}
/* 文章排版（窄行距、正文次要色、加粗回主色） */
.article-body .article-meta{font-size:13px;color:var(--color-text-tertiary);margin-bottom:var(--space-16)}
.article-body h3{font-size:1.125rem;line-height:1.5;font-weight:var(--weight-semibold);margin:var(--space-32) 0 var(--space-12)}
.article-body p{font-size:var(--font-size-body);line-height:1.9;color:var(--color-text-secondary);margin:0 0 var(--space-16)}
.article-body strong{color:var(--color-text-primary);font-weight:var(--weight-semibold)}
.article-body ul,.article-body ol{margin:0 0 var(--space-16);padding-left:var(--space-24)}
.article-body li{font-size:var(--font-size-body);line-height:1.9;color:var(--color-text-secondary);margin-bottom:6px}
.article-table{width:100%;border-collapse:collapse;margin:var(--space-8) 0 var(--space-24);font-size:var(--font-size-caption)}
.article-table th,.article-table td{border:1px solid var(--color-border);padding:8px 12px;text-align:left;color:var(--color-text-secondary)}
.article-table th{background:var(--color-surface-muted);color:var(--color-text-primary);font-weight:var(--weight-semibold)}
.article-body .article-modules{font-size:13px;color:var(--color-text-tertiary);margin-top:var(--space-24)}
.article-body .article-quote{
  margin:0 0 var(--space-16);
  padding:var(--space-4) var(--space-16);
  border-left:3px solid var(--color-primary);
  color:var(--color-text-secondary);
  font-size:var(--font-size-body);
  line-height:1.9;
}
.article-cta{
  margin-top:var(--space-24);
  padding:var(--space-24);
  background:var(--color-surface-muted);
  border-radius:var(--radius-12);
  text-align:center;
}
.article-cta .btn{margin-bottom:var(--space-8)}
.article-cta p{font-size:13px;color:var(--color-text-tertiary);margin:0}
@media (max-width:767px){
  .article-modal{padding:0}
  .article-modal-panel{max-height:100vh;height:100%;border-radius:0}
  .article-modal-head{padding:var(--space-16) var(--space-20) var(--space-12)}
  .article-modal-body{padding:var(--space-20) var(--space-20) var(--space-32)}
}

/* ============================== 04 客户场景 ============================== */
.scenario-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--card-gap);
}
.scenario-card{
  background:var(--color-surface);
  border-radius:var(--radius-12);
  padding:var(--space-32) var(--card-pad);
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.scenario-card .card-title{margin-top:var(--space-20)}
.scenario-card p{
  margin-top:var(--space-12);
  font-size:var(--font-size-caption);
  line-height:var(--lh-caption);
  color:var(--color-text-secondary);
}
.scenario-card p + p{margin-top:var(--space-8)}
/* 客户案例横幅 */
.case-banner{
  margin-top:var(--card-gap);
  background:var(--color-surface);
  border-radius:var(--radius-12);
  padding:var(--space-32);
  box-shadow:var(--shadow-card);
  display:flex;
  align-items:center;
  gap:var(--space-24);
}
.case-text{
  color:var(--color-text-secondary);
}
@media (max-width:1199px){
  .scenario-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .scenario-grid{grid-template-columns:1fr}
  .case-banner{flex-direction:column;align-items:flex-start;gap:var(--space-16)}
}

/* ============================== 05 定价（2026-10-29 检测位订阅制） ============================== */
.pricing-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-32);
  align-items:start;
}
.pricing-kicker{
  font-size:var(--font-size-caption);
  font-weight:var(--weight-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-primary);
  margin-bottom:var(--space-12);
}
.pricing-lead{
  font-size:var(--font-size-h2);
  line-height:var(--lh-h2);
  font-weight:var(--weight-bold);
  color:var(--color-text-primary);
  margin:0;
}
.pricing-desc{
  margin-top:var(--space-16);
  max-width:34em;
  font-size:var(--font-size-body);
  line-height:var(--lh-body);
  color:var(--color-text-secondary);
}
.pricing-quote{
  margin:var(--space-20) 0 0;
  padding:var(--space-12) var(--space-16);
  border-left:3px solid var(--color-primary);
  border-radius:0 var(--radius-8) var(--radius-8) 0;
  background:var(--color-primary-soft);
  font-weight:var(--weight-semibold);
  color:var(--color-text-primary);
}
.pricing-platform{
  margin-top:var(--space-16);
  font-size:var(--font-size-caption);
  color:var(--color-text-tertiary);
}
.pricing-toggle{
  display:inline-flex;
  gap:2px;
  padding:4px;
  background:var(--color-surface-muted);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
}
.pricing-toggle button{
  border:0;
  background:transparent;
  border-radius:var(--radius-full);
  padding:8px 16px;
  font-size:var(--font-size-caption);
  font-weight:var(--weight-semibold);
  color:var(--color-text-secondary);
  cursor:pointer;
  transition:background-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out;
}
.pricing-toggle button.is-on{
  background:var(--color-surface);
  color:var(--color-primary);
  box-shadow:var(--shadow-card);
}
.pricing-slot-note{
  margin-top:var(--space-24);
  padding:var(--space-16) var(--space-20);
  background:var(--color-surface);
  border:1px solid var(--color-border-soft);
  border-radius:var(--radius-10);
  font-size:var(--font-size-caption);
  line-height:1.8;
  color:var(--color-text-secondary);
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-20);
  margin-top:var(--space-24);
}
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-12);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-12);
  padding:var(--space-24);
  transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out;
}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.plan-card--featured{
  border-color:var(--color-primary);
  box-shadow:0 16px 40px rgba(22,119,255,.14);
}
.plan-badge{
  position:absolute;
  top:-12px;
  right:var(--space-16);
  padding:4px 12px;
  border-radius:var(--radius-full);
  background:var(--gradient-brand);
  color:#fff;
  font-size:var(--font-size-xs);
  font-weight:var(--weight-semibold);
  box-shadow:var(--shadow-btn);
}
.plan-name{
  font-size:var(--font-size-h3);
  font-weight:var(--weight-bold);
  color:var(--color-text-primary);
  margin:0;
}
.plan-pos{
  font-size:var(--font-size-caption);
  font-weight:var(--weight-medium);
  color:var(--color-primary);
}
.plan-audience{
  min-height:3.4em;
  font-size:var(--font-size-xs);
  line-height:1.7;
  color:var(--color-text-tertiary);
}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-top:var(--space-4)}
.plan-price-num{
  font-size:2.1rem;
  line-height:1;
  font-weight:var(--weight-bold);
  color:var(--color-text-primary);
}
.plan-price-per{font-size:var(--font-size-caption);color:var(--color-text-tertiary)}
.plan-price-sub{
  min-height:1.4em;
  font-size:var(--font-size-xs);
  font-weight:var(--weight-medium);
  color:var(--color-text-tertiary);
}
.plan-price-sub.is-saving{color:var(--color-success)}
.plan-list{
  list-style:none;
  margin:var(--space-4) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-8);
}
.plan-list li{
  position:relative;
  padding-left:20px;
  font-size:var(--font-size-xs);
  line-height:1.6;
  color:var(--color-text-secondary);
}
.plan-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--color-primary);
  font-weight:var(--weight-bold);
}
.plan-cta{margin-top:auto;padding-top:var(--space-12);display:flex;flex-direction:column;gap:var(--space-8)}
.pricing-free{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-20);
  flex-wrap:wrap;
  margin-top:var(--space-20);
  padding:var(--space-16) var(--space-20);
  background:var(--color-surface-muted);
  border:1px dashed var(--color-border);
  border-radius:var(--radius-12);
}
.pricing-free p{margin:0;font-size:var(--font-size-caption);line-height:1.7;color:var(--color-text-secondary)}
.pricing-free b{color:var(--color-text-primary)}
.pricing-micro{
  margin-top:var(--space-16);
  font-size:var(--font-size-caption);
  color:var(--color-text-tertiary);
  text-align:center;
}
.pricing-table-wrap{
  margin-top:var(--space-32);
  overflow-x:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-12);
  background:var(--color-surface);
}
.pricing-table{
  width:100%;
  min-width:1040px;
  border-collapse:collapse;
  font-size:var(--font-size-caption);
}
.pricing-table th,.pricing-table td{
  padding:12px 16px;
  text-align:center;
  border-bottom:1px solid var(--color-border-soft);
  color:var(--color-text-secondary);
}
.pricing-table th:first-child,.pricing-table td:first-child{text-align:left}
.pricing-table thead th{
  background:var(--color-surface-muted);
  color:var(--color-text-primary);
  font-weight:var(--weight-semibold);
}
.pricing-table tbody tr:last-child td{border-bottom:0}
.pricing-table td.is-yes{color:var(--color-success);font-weight:var(--weight-semibold)}
.pricing-table td.is-none{color:var(--color-text-tertiary)}
.pricing-table-note{
  margin-top:var(--space-12);
  font-size:var(--font-size-caption);
  color:var(--color-text-tertiary);
}
.pricing-all{
  margin-top:var(--space-24);
  text-align:center;
}
@media (max-width:1199px){
  .pricing-hero{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .pricing-grid{grid-template-columns:1fr}
  .pricing-toggle{width:100%;justify-content:center}
  .pricing-toggle button{flex:1}
}