/* ============================================
   watermark_main.css
   林较瘦 /mindsurge-watermark 页面
   基于 huasheng.ai /resources/marvis/ 精确复刻
   ============================================ */

/* ── Override html/body for Dark Theme ── */
html, body {
  background: #0E0D0B !important;
  color: #F2EADC !important;
  font-weight: 300;
  line-height: 1.7;
}
main {
  background: #0E0D0B;
  color: #F2EADC;
}

/* ── Nav Override ── */
.nav { background: transparent !important; border-bottom-color: transparent !important; }
.nav .nav-brand, .nav .nav-links a { color: #F2EADC !important; }
.nav .nav-links a:hover { color: #BC9B6A !important; }
.nav.scrolled { background: rgba(14,13,11,0.85) !important; backdrop-filter: blur(24px); border-bottom-color: rgba(242,234,220,0.12) !important; }
.nav-light { background: transparent !important; }

/* ── Hide Global Footer ── */
.footer { display: none !important; }

/* ── Container ── */
.wm-container { margin: 0 auto; }

/* ── Hero ── */
.wm-hero { background: #0E0D0B; color: #F2EADC; padding: 80px 0 40px; }
.wm-breadcrumb { margin-bottom: 24px; font-family: var(--c-font-mono, 'Inter', monospace); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(242,234,220,0.3); }
.wm-breadcrumb a { color: inherit; text-decoration: none; transition: color 0.3s; }
.wm-breadcrumb a:hover { color: #F2EADC; }
.wm-breadcrumb-sep { margin: 0 12px; color: rgba(242,234,220,0.3); }
.wm-breadcrumb-current { color: #F2EADC; }
.wm-hero-header { margin-bottom: 0; }
.wm-hero-label { font-family: var(--c-font-mono, 'Inter', monospace); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 16px; }
.wm-hero-title {
  font-family: var(--c-font-display, 'Playfair Display', Georgia, serif);
  font-weight: 400; font-size: 44px; line-height: 1.0; letter-spacing: -0.02em; margin-bottom: 24px;
}
@media (min-width: 640px) { .wm-hero-title { font-size: 64px; } }
@media (min-width: 1024px) { .wm-hero-title { font-size: 88px; } }
.wm-hero-desc {
  font-size: 16px; font-weight: 300; line-height: 1.8;
  color: rgba(242,234,220,0.65); max-width: 680px; margin-bottom: 32px;
}
@media (min-width: 1024px) { .wm-hero-desc { font-size: 19px; } }

/* ── Hero Video ── */
.wm-hero-video {
  margin-top: 24px;
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(242,234,220,0.8);
  max-width: 720px;
  position: relative;
}
.wm-hero-video video {
  width: 100%;
  display: block;
}
.wm-video-overlay {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: var(--c-font-mono, 'Inter', monospace);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: rgba(242,234,220,0.8);
  background: rgba(14,13,11,0.6);
  padding: 4px 10px;
  border-radius: 4px;
}

/* ── Accent ── */
.wm-accent { font-style: italic; color: #FF4D3D; }
.wm-accent-gold { font-style: italic; color: #BC9B6A; }

/* ── Primary Button ── */
.wm-btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px; border-radius: 9999px;
  font-family: var(--c-font-mono, 'Inter', monospace);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #0E0D0B; text-decoration: none;
  transition: transform 0.3s; margin-bottom: 40px;
}
.wm-btn-primary:hover { transform: translateY(-2px); }
.wm-btn-primary svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Section ── */
.wm-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 640px) { .wm-page { padding: 0 40px; } }
@media (min-width: 1024px) { .wm-page { padding: 0 64px; } }

.wm-section {
  margin-bottom: 80px;
  border-top: 1px solid rgba(242,234,220,0.18);
  padding-top: 56px;
}
.wm-section:last-of-type { margin-bottom: 80px; }
.wm-section-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.wm-num {
  font-family: var(--c-font-mono, 'Inter', monospace);
  font-size: 12px; letter-spacing: 0.2em;
}
.wm-section-label {
  font-family: var(--c-font-mono, 'Inter', monospace);
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,234,220,0.4);
}
.wm-section-title {
  font-family: var(--c-font-display, 'Playfair Display', Georgia, serif);
  font-weight: 400; font-size: 30px; line-height: 1.1;
  letter-spacing: -0.015em; margin-bottom: 16px;
}
@media (min-width: 1024px) { .wm-section-title { font-size: 40px; } }
.wm-section-desc {
  font-size: 15px; font-weight: 300; line-height: 1.8;
  color: rgba(242,234,220,0.65); max-width: 680px; margin-bottom: 32px;
}

/* ── Platform Grid (gap-px, 2→4 cols, border, rounded-xl, mb-10) ── */
.wm-platform-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(242,234,220,0.12);
  border: 1px solid rgba(242,234,220,0.12);
  border-radius: 12px; overflow: hidden; margin-bottom: 40px;
}
@media (min-width: 640px) { .wm-platform-grid { grid-template-columns: repeat(4, 1fr); } }
.wm-platform-item { background: #0E0D0B; padding: 24px 20px; text-align: center; }
.wm-platform-name { font-family: var(--c-font-display, 'Playfair Display', Georgia, serif); font-size: 18px; }
@media (min-width: 1024px) { .wm-platform-name { font-size: 20px; } }
.wm-platform-tag {
  font-family: var(--c-font-mono, 'Inter', monospace);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,234,220,0.35); margin-top: 8px;
}

/* ── Mode Cards (border, rounded-xl, p-6, 2 cols) ── */
.wm-mode-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .wm-mode-grid { grid-template-columns: repeat(2, 1fr); } }
.wm-mode-card { border: 1px solid rgba(242,234,220,0.12); border-radius: 12px; padding: 24px; }
.wm-mode-label {
  font-family: var(--c-font-mono, 'Inter', monospace);
  font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  margin-bottom: 12px;
}
.wm-mode-desc { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(242,234,220,0.7); }

/* ── Steps (space-y-4, max-w-[680px]) ── */
.wm-steps { list-style: none; padding: 0; max-width: 680px; }
.wm-step-item { display: flex; gap: 16px; align-items: flex-start; }
.wm-step-item + .wm-step-item { margin-top: 16px; }
.wm-step-num {
  font-family: var(--c-font-mono, 'Inter', monospace);
  font-size: 12px; margin-top: 2px; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
}
.wm-step-text { font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(242,234,220,0.78); }

/* ── Skill List (gap-px, border, rounded-xl) ── */
.wm-skill-list {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(242,234,220,0.12);
  border: 1px solid rgba(242,234,220,0.12);
  border-radius: 12px; overflow: hidden;
}
.wm-skill-item { background: #0E0D0B; padding: 24px; }
@media (min-width: 1024px) { .wm-skill-item { padding: 28px; } }
.wm-skill-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.wm-skill-title { font-family: var(--c-font-display, 'Playfair Display', Georgia, serif); font-size: 20px; font-weight: 400; }
@media (min-width: 1024px) { .wm-skill-title { font-size: 24px; } }
.wm-skill-desc { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(242,234,220,0.65); max-width: 720px; margin-top: 8px; }

/* ── Scenario Grid ── */
.wm-scenario-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: rgba(242,234,220,0.12);
  border: 1px solid rgba(242,234,220,0.12);
  border-radius: 12px; overflow: hidden;
}
@media (min-width: 640px) { .wm-scenario-grid { grid-template-columns: repeat(3, 1fr); } }
.wm-scenario-card { background: #0E0D0B; padding: 28px 24px; min-height: 160px; display: flex; flex-direction: column; }
.wm-scenario-title { font-family: var(--c-font-display, 'Playfair Display', Georgia, serif); font-size: 22px; font-weight: 400; line-height: 1.25; margin-bottom: 12px; }
.wm-scenario-desc { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(242,234,220,0.6); margin-top: auto; }

/* ── Task Section ── */
.wm-task-section { margin-top: 40px; }
.wm-task-subhead {
  font-family: var(--c-font-mono, 'Inter', monospace);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 20px;
}
.wm-task-list { display: flex; flex-direction: column; gap: 24px; }
.wm-task-item { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: flex-start; }
.wm-task-num {
  font-family: var(--c-font-display, 'Playfair Display', Georgia, serif);
  font-size: 24px; line-height: 1; color: rgba(242,234,220,0.3); width: 32px; flex-shrink: 0;
}
@media (min-width: 1024px) { .wm-task-num { font-size: 28px; } }
.wm-task-title { font-family: var(--c-font-display, 'Playfair Display', Georgia, serif); font-size: 19px; font-weight: 400; line-height: 1.3; margin-bottom: 6px; }
@media (min-width: 1024px) { .wm-task-title { font-size: 22px; } }
.wm-task-desc { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(242,234,220,0.6); max-width: 720px; }

/* ── More Grid (gap-px, 2→3 cols, border, rounded-xl) ── */
.wm-more-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(242,234,220,0.12);
  border: 1px solid rgba(242,234,220,0.12);
  border-radius: 12px; overflow: hidden; margin-bottom: 80px;
}
@media (min-width: 640px) { .wm-more-grid { grid-template-columns: repeat(3, 1fr); } }
.wm-more-item {
  background: #0E0D0B; padding: 28px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--c-font-display, 'Playfair Display', Georgia, serif);
  font-size: 16px; text-decoration: none; color: #F2EADC;
  transition: background-color 0.3s;
}
.wm-more-item:hover { background: rgba(242,234,220,0.03); }
.wm-more-item svg { color: rgba(242,234,220,0.4); flex-shrink: 0; transition: color 0.3s; }
.wm-more-item:hover svg { color: #BC9B6A; }
@media (min-width: 1024px) { .wm-more-item { font-size: 18px; } }

/* ── Responsive ── */
@media (min-width: 1024px) {
  .wm-hero { padding: 100px 0 50px; }
}