/* ── Newspilot Landing Styles ── */

/* Hero */
.hero {
  min-height: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 72px 24px 32px; max-width: 900px; margin: 0 auto;
}
.hero-eyebrow {
  font-size: 13px; font-weight: 600; color: var(--text-3);
  letter-spacing: 0.3px; text-transform: none; margin-bottom: 20px;
}
.hero-tagline {
  font-size: clamp(26px, 3.8vw, 40px); font-weight: 700;
  letter-spacing: -1.2px; text-align: center; margin-bottom: 20px;
  line-height: 1.15; max-width: 720px;
}
.hero-tagline em { font-style: normal; color: var(--text-2); }
.hero-sub {
  font-size: clamp(14px, 1.6vw, 17px); font-weight: 400; color: var(--text-2);
  text-align: center; margin-bottom: 30px; line-height: 1.65; max-width: 580px;
}

/* Demo */
.demo-box {
  width: 100%; background: var(--bg-2); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border);
}
.demo-header {
  display: flex; align-items: center; padding: 0 20px;
  border-bottom: 1px solid var(--border); background: var(--bg-3);
}
.demo-dots { display: flex; gap: 6px; padding-right: 16px; }
.demo-dots span { width: 10px; height: 10px; border-radius: 50%; background: #d1d1d6; }
.demo-dots span:first-child { background: #ff5f57; }
.demo-dots span:nth-child(2) { background: #febc2e; }
.demo-dots span:nth-child(3) { background: #28c840; }
.demo-tab {
  padding: 9px 14px; font-family: var(--mono); font-size: 11px; color: var(--text-3);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s; user-select: none;
}
.demo-tab:hover { color: var(--text-2); }
.demo-tab.active { color: var(--text); border-bottom-color: var(--text); }
.demo-copy {
  margin-left: auto; padding: 4px 12px; font-family: var(--mono); font-size: 10px;
  color: var(--text-3); background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; transition: all .2s;
}
.demo-copy:hover { color: var(--text-2); border-color: rgba(0,0,0,.12); }
.demo-body { display: flex; min-height: 200px; }
.demo-code { flex: 1; padding: 14px 18px; overflow-x: auto; border-right: 1px solid var(--border); }
.demo-result { flex: 1; padding: 14px 18px; overflow-x: auto; position: relative; }
.demo-result-label {
  position: absolute; top: 12px; right: 18px; font-family: var(--mono);
  font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px;
}
pre { margin: 0; }
code { font-family: var(--mono); font-size: 11px; line-height: 1.55; white-space: pre; color: var(--text); }
.hl-kw { color: #d73a49; } .hl-str { color: #032f62; }
.hl-prop { color: #005cc5; } .hl-num { color: #005cc5; }
.hl-comment { color: #6a737d; font-style: italic; }

/* Install CTA */
.install-wrap {
  width: 100%; max-width: 720px; margin: 0 auto 24px;
}
.install-strip {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.install-label {
  font-size: 12px; color: var(--text-3); white-space: nowrap; font-weight: 500;
}
.install-cmd {
  flex: 1; font-family: var(--mono); font-size: 11px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; padding: 0;
}
.install-copy {
  padding: 4px 10px; font-family: var(--mono); font-size: 10px;
  color: var(--text-3); background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; white-space: nowrap; transition: all .2s;
}
.install-copy:hover { color: var(--text-2); border-color: rgba(0,0,0,.12); }
.install-more {
  float: right; margin-top: 8px;
  font-size: 12px; font-weight: 500; color: var(--text-2); text-decoration: none;
  border-bottom: 1px dashed var(--text-3); transition: color .2s;
}
.install-more:hover { color: var(--text); border-bottom-color: var(--text); }
.install-hint {
  clear: both; text-align: right; margin-top: 6px; font-size: 11px; color: var(--text-3); line-height: 1.5;
}
.install-hint code {
  font-family: var(--mono); font-size: 10px; background: var(--bg-3);
  padding: 1px 5px; border-radius: 3px;
}
.install-hint a { color: #d4853a; text-decoration: none; }
.install-hint a:hover { text-decoration: underline; }

/* Visual */
.visual-section {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px 40px; background: var(--bg);
}
.visual-hint {
  text-align: center; margin-bottom: 16px;
  font-size: 16px; font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.2px;
  background: linear-gradient(135deg, #c47a3a 0%, #8b3a3a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; cursor: pointer;
}
.visual-hint svg { stroke: #c47a3a; }
.visual-wrap {
  position: relative; width: 560px; height: 560px; margin-bottom: 24px;
  cursor: pointer; border-radius: 20px; overflow: hidden; background: var(--bg);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.visual-wrap:hover { transform: scale(1.03); }
.visual-wrap canvas { width: 100%; height: 100%; }

/* Stats */
.stats { display: flex; gap: 64px; justify-content: center; margin-bottom: 100px; }
.stat { text-align: center; }
.stat-num { font-family: var(--font); font-size: 48px; font-weight: 700; letter-spacing: -2px; color: var(--text); line-height: 1; }
.stat-label { font-size: 13px; font-weight: 500; color: var(--text-3); margin-top: 8px; letter-spacing: 0.3px; }

/* Footer */
.footer {
  background: var(--bg-3); padding: 20px 24px;
  display: flex; justify-content: center; gap: 28px; font-size: 12px; color: var(--text-3);
}
.footer a { color: var(--text-3); text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--text); }

@media (max-width: 768px) {
  .demo-body { flex-direction: column; }
  .demo-code { border-right: none; border-bottom: 1px solid var(--border); }
  .demo-header { flex-wrap: wrap; }
  .demo-tab { padding: 7px 10px; font-size: 10px; }
  .stats { gap: 36px; } .stat-num { font-size: 36px; }
  .visual-wrap { width: 300px; height: 300px; }
  .install-strip { flex-wrap: wrap; }
  .install-label { width: 100%; margin-bottom: 4px; }
  .install-cmd { font-size: 10px; }
  .footer { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .hero { padding: 56px 16px 24px; }
}