/* ============================================================
   site.css
   Page-specific styles for 林居数聚 landing page.
   Requires claude-ui.css loaded before this file.
   ============================================================ */


/* ── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=DM+Mono:wght@300;400&family=Noto+Serif+SC:wght@300;400&family=Noto+Sans+SC:wght@300;400;500&display=swap');


/* ── Font stack override: add CJK fallback ───────────────── */
:root {
  --font-sans:  'DM Sans',      'Noto Sans SC',  system-ui, sans-serif;
  --font-serif: 'Noto Serif SC', Georgia, serif;
  --font-mono:  'DM Mono',      'Courier New',   monospace;

  /* Site layout */
  --max-w:  1280px;
  --sec-v:  112px;
  --sec-h:  32px;

  /* Motion */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.60s;
  --dur-fast:  0.20s;
}

@media (max-width: 768px) {
  :root {
    --sec-v: 72px;
    --sec-h: 20px;
  }
}


/* ── Base ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* Override container to use site max-width */
.container {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 var(--sec-h);
}


/* ── Scroll reveal ───────────────────────────────────────── */
.reveal {
  opacity:   0;
  transform: translateY(18px);
  transition:
    opacity   var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.reveal.visible {
  opacity:   1;
  transform: none;
}


/* ── Selection override ──────────────────────────────────── */
::selection {
  background: var(--purple-100);
  color:      var(--purple-900);
}


/* ════════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════ */
#nav {
  position:       fixed;
  top: 0; left: 0; right: 0;
  z-index:        200;
  height:         56px;
  background:     var(--color-bg);
  border-bottom:  0.5px solid var(--color-border);
  transition:
    background    var(--dur-fast),
    border-color  var(--dur-fast),
    box-shadow    var(--dur-fast);
}
#nav.scrolled {
  background:  var(--color-bg-primary);
  box-shadow:  0 1px 0 var(--color-border-md);
}

.nav-inner {
  max-width:   var(--max-w);
  margin:      0 auto;
  padding:     0 var(--sec-h);
  height:      100%;
  display:     flex;
  align-items: center;
  gap:         40px;
}

.nav-logo img { height: 22px; }

.nav-links {
  display:      flex;
  align-items:  center;
  gap:          28px;
  margin-right: auto;
}
.nav-links a {
  font-size:   var(--text-sm);
  font-weight: 400;
  color:       var(--color-text-secondary);
  transition:  color var(--dur-fast);
}
.nav-links a:hover {
  color:           var(--color-text-primary);
  text-decoration: none;
}

/* Nav login button — use claude-ui btn classes */
#nav .btn {
  height:  34px;
  font-size: 13px;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
}


/* ════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.s-hero {
  min-height:  100svh;
  display:     flex;
  align-items: center;
  padding:     calc(56px + 64px) var(--sec-h) 80px;
  position:    relative;
  background:  var(--color-bg);
}
.s-hero .container { position: relative; z-index: 2; }

/* Grid on pseudo-element — mask anchored over the content block (left-centre),
   so the top-left empty quadrant stays fully transparent */
.s-hero::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  0;
  background-image:
    linear-gradient(rgba(0,0,0,0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.042) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(
    ellipse 58% 52% at 36% 64%,
    black 0%,
    rgba(0,0,0,0.35) 50%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 58% 52% at 36% 64%,
    black 0%,
    rgba(0,0,0,0.35) 50%,
    transparent 78%
  );
  pointer-events: none;
}

/* Soft ambient blobs */
.blob {
  position:       absolute;
  border-radius:  50%;
  pointer-events: none;
  filter:         blur(130px);
  z-index:        1;
}
.blob-a {
  width:      440px;
  height:     440px;
  background: rgba(83, 74, 183, 0.08);
  top:        8%;
  left:       -60px;
}
.blob-b {
  width:      300px;
  height:     300px;
  background: rgba(29, 158, 117, 0.05);
  bottom:     12%;
  right:      10%;
}

/* Pill badge */
.pill {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       5px 14px;
  border-radius: 999px;
  border:        0.5px solid var(--color-border-md);
  background:    var(--color-bg-primary);
  font-family:   var(--font-mono);
  font-size:     11px;
  letter-spacing: 0.10em;
  color:         var(--color-text-tertiary);
  margin-bottom: 24px;
}
.dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--purple-600);
  flex-shrink:   0;
  animation:     blink 2.4s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* Hero headline */
.hero-headline {
  font-family:  var(--font-serif);
  font-size:    clamp(3rem, 7vw, 5.2rem);
  font-weight:  300;
  line-height:  1.12;
  color:        var(--color-text-primary);
  margin:       0 0 24px;
  letter-spacing: -0.02em;
}

/* Gradient text — purple spectrum */
.grad-text {
  font-style: normal;
  background: linear-gradient(135deg, var(--purple-400) 0%, var(--purple-600) 55%, var(--teal-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.hero-sub {
  font-size:     clamp(0.88rem, 1.4vw, 1rem);
  color:         var(--color-text-secondary);
  line-height:   1.9;
  max-width:     560px;
  margin-bottom: 40px;
}

/* Hero CTAs */
.hero-actions {
  display:       flex;
  align-items:   center;
  gap:           12px;
  flex-wrap:     wrap;
  margin-bottom: 64px;
}

/* Override btn-primary with purple accent (same as login page) */
.btn-primary {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       0 var(--space-6);
  height:        42px;
  border-radius: var(--radius-lg);
  background:    var(--purple-600);
  color:         #fff;
  font-family:   var(--font-sans);
  font-size:     var(--text-sm);
  font-weight:   500;
  border:        0.5px solid var(--purple-600);
  cursor:        pointer;
  white-space:   nowrap;
  text-decoration: none;
  transition:
    background   var(--dur-fast),
    border-color var(--dur-fast),
    transform    120ms ease;
}
.btn-primary:hover {
  background:   var(--purple-800);
  border-color: var(--purple-800);
  text-decoration: none;
}
.btn-primary:active { transform: scale(0.98); }

/* Ghost button */
.btn-ghost {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       0 var(--space-5);
  height:        42px;
  border-radius: var(--radius-lg);
  background:    transparent;
  color:         var(--color-text-secondary);
  font-family:   var(--font-sans);
  font-size:     var(--text-sm);
  font-weight:   400;
  border:        0.5px solid var(--color-border-md);
  cursor:        pointer;
  white-space:   nowrap;
  text-decoration: none;
  transition:
    background   var(--dur-fast),
    color        var(--dur-fast),
    border-color var(--dur-fast);
}
.btn-ghost:hover {
  background:      var(--color-bg-secondary);
  color:           var(--color-text-primary);
  border-color:    var(--color-border-strong);
  text-decoration: none;
}
.btn-ghost:active { transform: scale(0.98); }

.btn-sm {
  height:    34px;
  font-size: 12px;
  padding:   0 var(--space-4);
  border-radius: var(--radius-md);
}

/* Hero stats strip */
.hero-stats {
  display:     flex;
  align-items: center;
  gap:         40px;
  flex-wrap:   wrap;
}
.stat {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.stat-num {
  font-family: var(--font-mono);
  font-size:   1.8rem;
  font-weight: 400;
  color:       var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-num sup {
  font-size:      0.8rem;
  color:          var(--purple-600);
  vertical-align: super;
}
.stat-label {
  font-size:      var(--text-xs);
  color:          var(--color-text-tertiary);
  letter-spacing: 0.06em;
}
.stat-sep {
  width:      1px;
  height:     36px;
  background: var(--color-border-md);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .s-hero {
    min-height: auto;
    padding-top: calc(56px + 40px);
    padding-bottom: 60px;
  }
  .hero-stats { gap: 20px; }
  .stat-sep   { display: none; }
}
@media (max-width: 480px) {
  .hero-headline { font-size: 2.6rem; }
  .hero-actions  { flex-direction: column; align-items: flex-start; }
}


/* ════════════════════════════════════════════════════════════
   SECTION SHARED
═══════════════════════════════════════════════════════════ */
.s-section { padding: var(--sec-v) var(--sec-h); }

.s-header  { margin-bottom: 52px; }

.s-label {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--color-text-tertiary);
  margin-bottom:  14px;
}

.s-headline {
  font-family:    var(--font-serif);
  font-size:      clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight:    300;
  color:          var(--color-text-primary);
  line-height:    1.22;
  margin-bottom:  10px;
  letter-spacing: -0.01em;
}

.s-sub {
  font-size:   var(--text-base);
  color:       var(--color-text-secondary);
  max-width:   480px;
  line-height: var(--leading-relaxed);
}

/* Divider */
.div-line {
  height:     1px;
  max-width:  var(--max-w);
  margin:     0 auto;
  background: linear-gradient(
    90deg,
    transparent  0%,
    var(--color-border-md) 20%,
    var(--color-border-md) 80%,
    transparent 100%
  );
}


/* ════════════════════════════════════════════════════════════
   02 · CATALOG TABS & CARDS
═══════════════════════════════════════════════════════════ */
.catalog-tabs {
  display:        flex;
  gap:            2px;
  margin-bottom:  32px;
  border-bottom:  0.5px solid var(--color-border);
  overflow-x:     auto;
  scrollbar-width: none;
}
.catalog-tabs::-webkit-scrollbar { display: none; }

.tab {
  padding:       10px 20px;
  background:    transparent;
  border:        none;
  border-bottom: 2px solid transparent;
  color:         var(--color-text-tertiary);
  font-family:   var(--font-sans);
  font-size:     var(--text-sm);
  font-weight:   400;
  cursor:        pointer;
  white-space:   nowrap;
  margin-bottom: -1px;
  transition:    color var(--dur-fast), border-color var(--dur-fast);
}
.tab:hover  { color: var(--color-text-secondary); }
.tab.active {
  color:              var(--purple-600);
  border-bottom-color: var(--purple-600);
}

/* Catalog grid */
.catalog-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap:                   10px;
}

/* Data card */
.data-card {
  background:    var(--color-bg-primary);
  border:        0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       20px;
  cursor:        pointer;
  transition:
    border-color var(--dur-fast),
    background   var(--dur-fast),
    transform    var(--dur-fast);
}
.data-card:hover {
  border-color: var(--color-border-md);
  background:   var(--color-bg-secondary);
  transform:    translateY(-2px);
}
.data-card:focus-visible {
  outline:    none;
  box-shadow: var(--shadow-focus);
}

/* Category accent bar */
.card-accent {
  width:         24px;
  height:        2px;
  border-radius: 1px;
  margin-bottom: 14px;
}
.cat-climate    .card-accent { background: var(--teal-400); }
.cat-ecology    .card-accent { background: var(--green-400); }
.cat-economy    .card-accent { background: var(--blue-400); }
.cat-governance .card-accent { background: var(--purple-400); }

.card-cat {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-text-tertiary);
  margin-bottom:  8px;
}
.card-name {
  font-size:     var(--text-sm);
  font-weight:   500;
  color:         var(--color-text-primary);
  line-height:   1.3;
  margin-bottom: 3px;
}
.card-name-zh {
  font-size:     12px;
  color:         var(--color-text-secondary);
  margin-bottom: 10px;
}
.card-desc {
  font-size:   12px;
  color:       var(--color-text-tertiary);
  line-height: var(--leading-relaxed);
}

@media (max-width: 600px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 400px) {
  .catalog-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   03 · PLATFORM CAPABILITIES (VALUE ROWS)
═══════════════════════════════════════════════════════════ */
.value-row {
  display:               grid;
  grid-template-columns: 140px 1fr 1fr;
  gap:                   48px;
  align-items:           start;
  padding:               40px 0;
  border-top:            0.5px solid var(--color-border);
  transition:            border-color var(--dur-fast);
}
.value-row:last-of-type {
  border-bottom: 0.5px solid var(--color-border);
}

.value-meta {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.big-num {
  font-family:  var(--font-mono);
  font-size:    2rem;
  font-weight:  300;
  color:        var(--color-text-tertiary);
  line-height:  1;
}
.value-title {
  font-family:  var(--font-serif);
  font-size:    1.4rem;
  font-weight:  300;
  line-height:  1;
}
.accent-a { color: var(--teal-400); }
.accent-b { color: var(--blue-400); }
.accent-c { color: var(--purple-400); }

.value-body {
  font-size:   var(--text-base);
  color:       var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.value-tags {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  align-content: flex-start;
}

/* Cap tags — use badge style from claude-ui */
.cap-tag {
  display:       inline-flex;
  padding:       4px 12px;
  border-radius: 999px;
  border:        0.5px solid var(--color-border-md);
  font-size:     12px;
  color:         var(--color-text-secondary);
  background:    var(--color-bg-secondary);
  white-space:   nowrap;
  transition:    border-color var(--dur-fast), color var(--dur-fast);
}
.cap-tag:hover {
  border-color: var(--purple-400);
  color:        var(--purple-600);
}

@media (max-width: 1024px) {
  .value-row {
    grid-template-columns: 120px 1fr;
    gap: 28px;
  }
  .value-tags { grid-column: 2; }
}
@media (max-width: 768px) {
  .value-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 30px 0;
  }
  .value-tags { grid-column: 1; }
}


/* ════════════════════════════════════════════════════════════
   04 · RESEARCH SCENARIOS
═══════════════════════════════════════════════════════════ */
.scenarios-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px;
}

.scenario-card {
  background:    var(--color-bg-primary);
  border:        0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding:       32px;
  transition:    border-color var(--dur-fast), background var(--dur-fast);
}
.scenario-card:hover {
  border-color: var(--color-border-md);
  background:   var(--color-bg-secondary);
}

.scenario-num {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  letter-spacing: 0.18em;
  color:          var(--color-text-tertiary);
  margin-bottom:  16px;
}
.scenario-card h3 {
  font-family:   var(--font-serif);
  font-size:     var(--text-lg);
  font-weight:   400;
  color:         var(--color-text-primary);
  margin-bottom: 10px;
  line-height:   1.3;
}
.scenario-card p {
  font-size:     var(--text-sm);
  color:         var(--color-text-secondary);
  line-height:   var(--leading-relaxed);
  margin-bottom: 20px;
  max-width:     none;
}
.scenario-sources {
  display:  flex;
  gap:      6px;
  flex-wrap: wrap;
}
.scenario-sources span {
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 0.08em;
  color:          var(--purple-600);
  padding:        3px 10px;
  border:         0.5px solid var(--purple-100);
  border-radius:  var(--radius-sm);
  background:     var(--purple-50);
}

@media (max-width: 768px) {
  .scenarios-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .scenario-card { padding: 22px; }
}


/* ════════════════════════════════════════════════════════════
   05 · ROADMAP
═══════════════════════════════════════════════════════════ */
.horizon-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
}

.horizon-card {
  background:    var(--color-bg-primary);
  border:        0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding:       28px;
  transition:    border-color var(--dur-fast), background var(--dur-fast);
}
.horizon-card:hover {
  border-color: var(--color-border-md);
  background:   var(--color-bg-secondary);
}

.horizon-badge {
  display:        inline-block;
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 0.10em;
  border-radius:  var(--radius-sm);
  padding:        3px 10px;
  margin-bottom:  18px;
}

/* "即将上线" → teal/success */
.horizon-badge:first-child,
.horizon-card:first-child .horizon-badge {
  color:      var(--teal-600);
  border:     0.5px solid var(--teal-200);
  background: var(--teal-50);
}
/* "规划中" → amber/warning */
.horizon-card:not(:first-child) .horizon-badge {
  color:      var(--amber-600);
  border:     0.5px solid var(--amber-200);
  background: var(--amber-50);
}

.horizon-card h3 {
  font-family:   var(--font-serif);
  font-size:     var(--text-base);
  font-weight:   400;
  color:         var(--color-text-primary);
  margin-bottom: 10px;
  line-height:   1.3;
}
.horizon-card p {
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width:   none;
}

@media (max-width: 768px) {
  .horizon-grid { grid-template-columns: 1fr; }
  .horizon-card { padding: 22px; }
}


/* ════════════════════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════════════════ */
.s-cta { padding: calc(var(--sec-v) * 1.2) var(--sec-h); }

.s-cta-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            16px;
}
.s-cta-inner .s-headline { text-align: center; }
.s-cta-inner .hero-actions { margin-bottom: 0; justify-content: center; }


/* ════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
#footer {
  background:  var(--color-bg-secondary);
  border-top:  0.5px solid var(--color-border);
  padding:     28px var(--sec-h);
}

.footer-inner {
  max-width:       var(--max-w);
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             16px;
}
.footer-brand {
  display:     flex;
  align-items: center;
  gap:         16px;
}
.footer-brand img { height: 18px; opacity: 0.55; }
.footer-copy {
  font-size: 12px;
  color:     var(--color-text-tertiary);
}

.footer-links {
  display:     flex;
  align-items: center;
  gap:         24px;
}
.footer-links a {
  font-size:  12px;
  color:      var(--color-text-tertiary);
  transition: color var(--dur-fast);
}
.footer-links a:hover {
  color:           var(--color-text-secondary);
  text-decoration: none;
}

@media (max-width: 768px) {
  .footer-inner {
    flex-direction:  column;
    align-items:     flex-start;
    gap:             12px;
  }
}