/* ============================================================
   Etsy AI 自动化训练营 · Theme B — 暖色工坊风 (Etsy 调性)
   奶油底 + 陶土橘/森绿 accent + 衬线标题 + 纸感卡片
   ============================================================ */
:root {
  --bg: #faf6ee;
  --band: #f2ebdd;
  --card: #fffdf8;
  --ink: #33291f;
  --muted: #6d6152;
  --dim: #a3968a;
  --terra: #c2552e;
  --terra-deep: #a8441f;
  --terra-soft: #f8e8e0;
  --forest: #47624c;
  --forest-soft: #e8efe8;
  --line: #e7dcc9;
  --line-strong: #d8c9b0;
  --shadow: 0 10px 30px rgba(94, 72, 45, 0.09);
  --shadow-lg: 0 22px 54px rgba(94, 72, 45, 0.14);
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --max: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

html, body { overflow-x: clip; }

.hero-grid > *, .split > *, .signup-grid > *, .fit-grid > *,
.day-grid > *, .mentor-card > *, .qr-card > *, .strip-grid > div { min-width: 0; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

::selection { background: var(--terra); color: #fff; }

.wrap { width: min(100% - 48px, var(--max)); margin: 0 auto; }
.narrow { width: min(100% - 48px, 860px); }

/* ---------- 占位标记 ---------- */
mark.ph {
  background: var(--terra-soft);
  color: var(--terra-deep);
  border-bottom: 1px dashed rgba(194, 85, 46, 0.5);
  border-radius: 3px;
  padding: 0 4px 1px;
}

.ph-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #f0e8d8, #f8f3e8);
  border: 1.5px dashed var(--line-strong);
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 1.9;
}

/* ---------- 跳转辅助 ---------- */
.skip {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
}
.skip:focus { top: 16px; }

/* ---------- 顶栏 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  background: rgba(250, 246, 238, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%);
}

.brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}
.brand span {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--dim);
}

.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--terra); }

.header-cta {
  flex: 0 0 auto;
  padding: 9px 22px;
  background: var(--terra);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}
.header-cta:hover { background: var(--terra-deep); transform: translateY(-1px); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }

.btn-gold {
  background: var(--terra);
  color: #fff;
  box-shadow: 0 12px 26px rgba(194, 85, 46, 0.3);
}
.btn-gold:hover { background: var(--terra-deep); }

.btn-ghost {
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--forest); color: var(--forest); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(72px, 10vw, 124px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 86% -10%, rgba(194, 85, 46, 0.1), transparent 60%),
    radial-gradient(680px 420px at -6% 28%, rgba(71, 98, 76, 0.08), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}

.hero-glow {
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 72%;
  background: radial-gradient(ellipse at center, rgba(194, 85, 46, 0.05), transparent 65%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra);
}
.eyebrow.muted { color: var(--dim); }

.hero h1 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: clamp(40px, 6.2vw, 72px);
  line-height: 1.16;
  color: var(--ink);
  font-weight: 700;
}
.hero h1 span { color: var(--terra); }

.hero-lead {
  margin: 0 0 34px;
  max-width: 560px;
  font-size: 17px;
  color: var(--muted);
}
.hero-lead strong { color: var(--ink); font-weight: 700; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

.hero-panel {
  display: grid;
  gap: 14px;
  padding: 28px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

.hero-stat {
  display: grid;
  gap: 2px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.hero-stat span { font-size: 12px; letter-spacing: 0.18em; color: var(--dim); font-weight: 600; }
.hero-stat strong { font-family: var(--serif); font-size: 19px; color: var(--forest); font-weight: 700; }

.hero-date { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }

/* ---------- 信任条 ---------- */
.trust-strip {
  border-bottom: 1px solid var(--line);
  background: var(--band);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 22px 0;
}
.strip-grid > div { display: grid; gap: 2px; }
.strip-grid span { font-size: 12px; letter-spacing: 0.16em; color: var(--dim); font-weight: 600; }
.strip-grid strong { font-size: 15px; color: var(--ink); font-weight: 600; }

/* ---------- 通用 section ---------- */
.section { padding: clamp(64px, 9vw, 110px) 0; }

.dark-band {
  background: var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin: 0 0 40px; text-align: left; }

.section-head h2, .proof-head h2, .fit-grid h2, .signup-copy h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 39px);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 700;
}
.section-head p { margin: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* ---------- 讲师 ---------- */
.mentor-grid { display: grid; gap: 24px; }

.mentor-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.mentor-photo { width: 180px; height: 220px; border-radius: 10px; }

.mentor-card .role { margin: 4px 0 4px; font-size: 13px; letter-spacing: 0.12em; color: var(--terra); font-weight: 700; }
.mentor-card h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 25px; color: var(--ink); font-weight: 700; }
.mentor-card ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 15px; }
.mentor-card li::marker { color: var(--terra); }

/* ---------- 痛点 ---------- */
.value-head { margin-bottom: 44px; }
.value-lead { font-size: 17px; }
.value-lead strong { color: var(--terra-deep); font-weight: 700; }

.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.pain-grid article {
  padding: 26px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
}
.pain-grid article:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pain-grid span {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--terra);
  letter-spacing: 0.2em;
  font-weight: 700;
}
.pain-grid h3 { margin: 10px 0 8px; font-size: 18px; color: var(--ink); font-weight: 700; }
.pain-grid p { margin: 0; font-size: 14px; line-height: 1.8; }

/* ---------- 作战地图 ---------- */
.ops-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(96px, auto);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 48px;
}

.map-core {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  padding: 22px 16px;
  background: var(--forest);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(71, 98, 76, 0.35);
}
.map-core span { font-size: 11px; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.72); font-weight: 700; }
.map-core strong { font-family: var(--serif); font-size: 16px; line-height: 1.55; color: #fdfaf2; font-weight: 700; }

.map-node {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: border-color 0.25s, transform 0.25s;
}
.map-node:hover { border-color: var(--terra); transform: translateY(-2px); }
.map-node b { font-size: 16px; color: var(--ink); }
.map-node span { font-size: 13px; color: var(--dim); }

/* 8 节点环绕 3x3 网格中心 (map-core 是同级第 1 个 div, 节点从 nth-of-type(2) 起) */
.map-node:nth-of-type(2) { grid-column: 1; grid-row: 1; }
.map-node:nth-of-type(3) { grid-column: 2; grid-row: 1; }
.map-node:nth-of-type(4) { grid-column: 3; grid-row: 1; }
.map-node:nth-of-type(5) { grid-column: 1; grid-row: 2; }
.map-node:nth-of-type(6) { grid-column: 3; grid-row: 2; }
.map-node:nth-of-type(7) { grid-column: 1; grid-row: 3; }
.map-node:nth-of-type(8) { grid-column: 2; grid-row: 3; }
.map-node:nth-of-type(9) { grid-column: 3; grid-row: 3; }

.levels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.levels article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--forest-soft);
}
.levels span { font-size: 12px; letter-spacing: 0.22em; color: var(--forest); font-weight: 700; }
.levels b { display: block; margin: 8px 0 6px; font-size: 17px; color: var(--ink); }
.levels p { margin: 0; font-size: 14px; }

/* ---------- 课表 ---------- */
.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 14px 22px;
  margin: -18px auto 40px;
}
.price-line span { font-size: 13px; letter-spacing: 0.18em; color: var(--dim); font-weight: 600; }
.price-line strong { font-family: var(--serif); font-size: 30px; color: var(--terra-deep); font-weight: 700; }
.price-line em { font-style: normal; font-size: 14px; color: var(--muted); }

.day-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.day-card {
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.25s;
}
.day-card:hover { box-shadow: var(--shadow-lg); }

.day-card header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.day-card header span {
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--terra-soft);
  color: var(--terra-deep);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.day-card h3 { margin: 0; font-size: 20px; color: var(--ink); font-weight: 700; }

.day-card dl { margin: 0; display: grid; gap: 14px; }
.day-card dl > div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.day-card dt {
  font-size: 13px;
  color: var(--forest);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.day-card dd { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- Skills 资产 ---------- */
.split-assets { align-items: center; }

.asset-vault {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.asset-vault span {
  padding: 12px 20px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
}
.asset-vault span:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: #fdfaf2;
  transform: translateY(-2px);
}

/* ---------- 往期实录 ---------- */
.proof { padding: clamp(64px, 9vw, 110px) 0; }

.proof-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.proof-head p { margin: 0; }

.photo-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 190px;
  gap: 16px;
}
.photo-card { margin: 0; border-radius: 12px; overflow: hidden; }
.photo-feature { grid-column: span 2; grid-row: span 2; }

/* ---------- 适合谁 ---------- */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 5vw, 72px);
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.check-list li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  color: var(--muted);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--forest-soft);
  color: var(--forest);
  font-size: 12px;
  font-weight: 800;
}
.check-list.dim li::before { content: "✕"; background: #efe9dd; color: var(--dim); }

/* ---------- 报名 ---------- */
.signup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.signup-copy > p { margin: 0 0 28px; }

.process { display: grid; gap: 18px; }
.process > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "num title" "num desc";
  column-gap: 16px;
  align-items: center;
}
.process span {
  grid-area: num;
  display: grid;
  place-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--terra);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
}
.process b { grid-area: title; color: var(--ink); font-size: 16px; }
.process p { grid-area: desc; margin: 0; font-size: 14px; }

.signup-panel {
  display: grid;
  gap: 22px;
  padding: 30px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

.signup-panel fieldset {
  margin: 0;
  padding: 0;
  border: none;
  display: grid;
  gap: 12px;
}
.signup-panel legend {
  padding: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--dim);
  font-weight: 700;
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.option:hover { border-color: var(--terra); background: var(--terra-soft); }
.option input { margin-top: 5px; accent-color: var(--terra); }
.option b { display: block; color: var(--ink); font-size: 15px; }
.option em { font-style: normal; font-size: 13px; color: var(--dim); }

.qr-card {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.qr-box { width: 128px; height: 128px; border-radius: 10px; }
.qr-card strong { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); font-weight: 700; }
.qr-card span { font-size: 14px; color: var(--dim); }

/* ---------- FAQ ---------- */
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 18px 40px 18px 0;
  font-size: 17px;
  color: var(--ink);
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 22px;
  color: var(--terra);
  transition: transform 0.2s;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 20px; font-size: 15px; max-width: 92%; }

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--band);
  padding: 40px 0 100px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer strong { font-family: var(--serif); font-size: 18px; color: var(--ink); font-weight: 700; }
.footer p { margin: 6px 0 0; font-size: 14px; color: var(--dim); }

/* ---------- 移动端悬浮 CTA ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(250, 246, 238, 0.95);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.mobile-cta a {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 8px;
  background: var(--terra);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 0 10px 24px rgba(194, 85, 46, 0.3);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { max-width: 520px; }
  .pain-grid, .levels { grid-template-columns: repeat(2, 1fr); }
  .split, .signup-grid { grid-template-columns: 1fr; }
  .photo-wall { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  body { font-size: 15px; }
  .header-cta { display: none; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .pain-grid, .levels, .day-grid { grid-template-columns: 1fr; }

  .ops-map { grid-template-columns: repeat(2, 1fr); }
  .map-core { grid-column: 1 / -1; grid-row: 1; }
  .map-node { grid-column: auto !important; grid-row: auto !important; }

  .mentor-card { grid-template-columns: 1fr; }
  .mentor-photo { width: 100%; height: 200px; }

  .proof-head { flex-direction: column; align-items: flex-start; }
  .photo-wall { grid-template-columns: 1fr; grid-auto-rows: 180px; }
  .photo-feature { grid-column: auto; grid-row: auto; }

  .fit-grid { grid-template-columns: 1fr; }
  .qr-card { grid-template-columns: 108px 1fr; }
  .qr-box { width: 108px; height: 108px; }

  .mobile-cta { display: block; }
  .footer { padding-bottom: 120px; }
}