/* base.css: 基础重置与设计令牌 */
:root {
  --color-primary: #5B62F8;
  --color-primary-hover: #4B52E6;
  --color-accent-warm: #FF9F43;
  --color-bg: #F7F8FA;
  --color-bg-alt: #FFFFFF;
  --color-text: #1C1F24;
  --color-text-dim: #555B66;
  --color-border: #E2E5EA;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --font-stack: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --transition-base: .25s cubic-bezier(.4,0,.2,1);
  --max-width: 1120px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-stack);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img,svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: auto; }
.skip-link:focus { left: 8px; top: 8px; background:#fff; padding: var(--space-2) var(--space-3); z-index: 1000; }

h1,h2,h3 { line-height: 1.25; font-weight: 700; }

/* Typography scale */
h1 { font-size: clamp(2.1rem, 4.2vw, 3rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.125rem); margin-bottom: var(--space-4); letter-spacing: -.3px; }
h3 { font-size: 1.125rem; }

p { margin-bottom: var(--space-4); }
.section-lead { margin-top: var(--space-5); font-size: 1rem; color: var(--color-text-dim); }
.section-sub { color: var(--color-text-dim); margin-bottom: var(--space-5); }
.meta-inline { font-size: .875rem; color: var(--color-text-dim); margin-top: var(--space-2); }
.inline-cta { color: var(--color-primary); font-weight: 600; cursor: pointer; }
.inline-cta:hover { text-decoration: underline; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
/* 限制正文行宽，增强可读性 */
.content-narrow { max-width: 760px; }
.section { padding: var(--space-9) 0 var(--space-8); }
.section > .container > h2 { margin-bottom: var(--space-3); }
.section > .container > p.section-sub + .types-grid { margin-top: var(--space-5); }
.section.alt { background:#F2F4F7; }

/* Hero */
.site-header { background: linear-gradient(135deg,#EEF0FF 0%,#FFFFFF 60%); padding-top: var(--space-8); }
.hero { display: grid; gap: var(--space-9); align-items: center; grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: var(--space-6);} }
.hero-sub { max-width: 40ch; color: var(--color-text-dim); }
.hero-cta-group { margin-top: var(--space-5); }
.ennea-ring { width: 260px; margin: 0 auto; }
.ennea-ring .ring { fill: none; stroke: var(--color-border); stroke-width: 2; }
.ennea-ring .points circle { fill: var(--color-primary); }

/* Buttons */
.btn { --btn-bg: var(--color-primary); --btn-color: #fff; --btn-bg-hover: var(--color-primary-hover); position: relative; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-5); font-size: 1rem; font-weight:600; border: none; border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-color); transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-lg { padding: var(--space-4) var(--space-6); font-size: 1.125rem; }
.btn-secondary { --btn-bg: #fff; --btn-color: var(--color-primary); border:1px solid var(--color-primary); }
.btn-secondary:hover { --btn-bg: var(--color-primary); --btn-color:#fff; }

/* Cards & grids */
.card { background: var(--color-bg-alt); padding: var(--space-5); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); position: relative; }
.pain-list { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); margin-top: var(--space-6); }
.pain-item h3 { font-size: 1rem; margin-bottom: var(--space-1); letter-spacing: .5px; }
.pain-item p { margin:0; font-size: .9375rem; line-height: 1.5; }
.types-grid { --min: 190px; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); margin-top: var(--space-6); }
.types-grid li { background: var(--color-bg-alt); padding: var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2); position: relative; }
.types-grid li p { margin:0; font-size:.875rem; color: var(--color-text-dim); }
.types-grid .type-num { position: relative; padding-right: var(--space-2); }
.type-num { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.type-tags { font-size: .875rem; color: var(--color-text-dim); }

.outcome-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); margin-top: var(--space-6); }
.outcome-item h3 { margin-bottom: var(--space-2); }
.outcome-item p { margin:0; font-size: .9rem; line-height: 1.55; }

.scenario-list { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); margin-top: var(--space-6); }
.scenario-list h3 { font-size: 1rem; margin-bottom: var(--space-1); }
.scenario-list p { margin:0; font-size: .875rem; color: var(--color-text-dim); }

.metrics { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); margin-top: var(--space-6); }
.metrics li { background: var(--color-bg-alt); padding: var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.metrics strong { display: block; font-size: 1rem; margin-bottom: var(--space-1); }

.quotes { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
.quotes blockquote { background: #fff; padding: var(--space-5); border-left: 4px solid var(--color-primary); font-size: .9rem; line-height: 1.55; border-radius: var(--radius-sm); margin:0; }
.theory { margin-top: var(--space-6); font-size: .875rem; color: var(--color-text-dim); }

.flow-steps { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); margin-top: var(--space-6); counter-reset: step; }
.flow-steps li { background: var(--color-bg-alt); padding: var(--space-5); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); position: relative; }
.flow-steps li h3 { font-size: 1rem; margin-bottom: var(--space-1); }
.flow-steps li p { margin:0; font-size: .85rem; color: var(--color-text-dim); }

.faq-items { display: grid; gap: var(--space-5); margin-top: var(--space-6); max-width: 820px; }
.faq-items details { background: var(--color-bg-alt); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.faq-items summary { cursor: pointer; font-weight: 600; }
.faq-items summary::-webkit-details-marker { display: none; }

.final-cta { background: linear-gradient(130deg,#584ff7 0%,#6E75FA 60%,#8288FF 100%); color: #fff; text-align: center; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.final-wrap { max-width: 640px; }
.final-wrap h2 { color: #fff; }
.final-sub { color: #E4E6FF; }

.center-cta, .side-cta { margin-top: var(--space-6); text-align: center; }

/* Footer */
.site-footer { background: #1C1F24; color: #D6DAE0; padding: var(--space-6) 0; margin-top: var(--space-9); font-size: .875rem; }
.site-footer a { color: #fff; }

/* Utilities */
.hero-visual { display:flex; justify-content:center; }
.footer-inner { display: flex; flex-direction: column; gap: var(--space-2); text-align: center; align-items: center; }

/* Responsive tweaks */
@media (max-width: 680px) {
  .section { padding: var(--space-8) 0 var(--space-7); }
  .container { padding: 0 var(--space-4); }
  .hero { gap: var(--space-6); }
}

/* --- Mobile first deep optimizations --- */
@media (max-width: 600px) {
  h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  h2 { font-size: clamp(1.35rem, 5.2vw, 1.75rem); }
  .section { padding: var(--space-7) 0 var(--space-6); }
  .hero-sub { font-size: .95rem; }
  .hero-visual { display:none; }
  .hero-cta-group .btn { width:100%; }
  .btn { padding: var(--space-3) var(--space-4); }
  .pain-list { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .types-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .scenario-list { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .outcome-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .metrics { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .flow-steps { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .faq-items { gap: var(--space-4); }
  .faq-items details { padding: var(--space-3) var(--space-4); }
  .final-cta { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .final-wrap { padding: 0 var(--space-2); }
  .final-cta .btn-lg { width:100%; }
}

@media (max-width: 400px) {
  .pain-list, .types-grid, .scenario-list, .outcome-grid, .metrics, .flow-steps { grid-template-columns: 1fr; }
  .section { padding: var(--space-6) 0 var(--space-5); }
  .btn { font-size: .95rem; }
  .eyebrow { font-size: .58rem; }
  .types-grid li { padding: var(--space-3); }
  .card { padding: var(--space-4); }
}

/* Eyebrow 标签 */
.eyebrow { display:inline-block; font-size:.65rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--color-primary); background: rgba(91,98,248,0.08); padding:4px 8px; border-radius: var(--radius-xs); margin-bottom: var(--space-2); }

/* 调整 FAQ 内文 */
.faq-items details p { font-size:.9rem; line-height:1.6; }

/* Metrics 第一个突出 */
.metrics li:first-child { border-left:4px solid var(--color-primary); box-shadow: var(--shadow-md); }

/* 九型网格大屏固定 3 列 */
@media (min-width:1080px) {
  .types-grid { grid-template-columns: repeat(3,1fr); }
}

/* 小屏进一步紧凑 */
@media (max-width:480px) {
  .types-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pain-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scenario-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}