@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #050810;
  --surface: #0d1220;
  --surface2: #131a2e;
  --border: #1a2440;
  --text: #e8edf5;
  --text-dim: #7b8ba5;
  --accent: #38bdf8;
  --accent2: #818cf8;
  --green: #34d399;
  --orange: #fb923c;
  --pink: #f472b6;
  --red: #ef4444;
  --radius: 16px;
  --max-w: 1120px;
  --glow: 0 0 80px rgba(56,189,248,0.08);
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Inter",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:var(--max-w);margin:0 auto;padding:0 28px}
code,.mono{font-family:"JetBrains Mono",monospace}

/* ── Animated BG ──────────────────────────── */
.bg-grid{position:fixed;inset:0;z-index:-1;background-image:
  radial-gradient(ellipse 80% 60% at 50% -10%,rgba(56,189,248,0.06),transparent),
  radial-gradient(ellipse 50% 40% at 80% 60%,rgba(129,140,248,0.04),transparent);
}

/* ── Nav ──────────────────────────────────── */
nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(16px);background:rgba(5,8,16,0.75);border-bottom:1px solid var(--border);padding:14px 0}
nav .container{display:flex;align-items:center;justify-content:space-between}
nav .logo{font-weight:800;font-size:1.15rem;letter-spacing:-0.03em}
nav .logo span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
nav .links{display:flex;gap:24px;font-size:0.88rem;color:var(--text-dim)}
nav .links a{color:var(--text-dim);transition:color .15s}nav .links a:hover{color:var(--text);text-decoration:none}
.gh-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;border:1px solid var(--border);font-size:0.82rem;color:var(--text);transition:border-color .2s}
.gh-btn:hover{border-color:var(--accent);text-decoration:none}
.gh-btn svg{width:16px;height:16px;fill:currentColor}

/* ── Hero ─────────────────────────────────── */
.hero{padding:100px 0 80px;text-align:center;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:0.78rem;color:var(--text-dim);margin-bottom:28px}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.hero h1{font-size:clamp(2.5rem,6vw,4.2rem);font-weight:900;letter-spacing:-0.04em;line-height:1.1;margin-bottom:20px}
.hero h1 .gradient{background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,var(--pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .sub{font-size:1.2rem;color:var(--text-dim);max-width:580px;margin:0 auto 40px;line-height:1.7}
.hero .sub strong{color:var(--text);font-weight:600}

/* ── Pain → Solution ─────────────────────── */
.pain-solution{display:flex;gap:20px;max-width:700px;margin:0 auto 48px;font-size:0.88rem}
.pain,.solution{flex:1;padding:20px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
.pain{border-color:rgba(239,68,68,.2)}
.solution{border-color:rgba(52,211,153,.2)}
.pain h4,.solution h4{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px}
.pain h4{color:var(--red)}
.solution h4{color:var(--green)}
.pain ul,.solution ul{list-style:none;color:var(--text-dim);line-height:2}
.pain li::before{content:"✕ ";color:var(--red);font-weight:700}
.solution li::before{content:"✓ ";color:var(--green);font-weight:700}

/* ── Install CTA ─────────────────────────── */
.install-row{display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto 20px}
.install-box{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 22px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.install-box:hover{border-color:var(--accent);box-shadow:var(--glow)}
.install-box .prompt{color:var(--text-dim);user-select:none}
.install-box code{flex:1;font-size:0.9rem;color:var(--green)}
.install-box .copy-hint{font-size:0.7rem;color:var(--text-dim);white-space:nowrap;opacity:0;transition:opacity .2s}
.install-box:hover .copy-hint{opacity:1}
.links-row{text-align:center;font-size:0.82rem;color:var(--text-dim)}

/* ── Stats ────────────────────────────────── */
.stats-bar{display:flex;justify-content:center;gap:56px;padding:52px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:0}
.stat{text-align:center}
.stat .num{font-size:2.8rem;font-weight:800;letter-spacing:-0.03em;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat .label{font-size:0.78rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-top:4px}

/* ── Section ──────────────────────────────── */
section{padding:80px 0}
.section-label{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--accent);font-weight:600;text-align:center;margin-bottom:12px}
.section-title{font-size:2rem;font-weight:800;text-align:center;margin-bottom:16px;letter-spacing:-0.03em}
.section-desc{text-align:center;color:var(--text-dim);max-width:560px;margin:0 auto 48px;font-size:0.95rem}

/* ── Provider Cards ───────────────────────── */
.providers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.p-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.p-card:hover{transform:translateY(-6px);box-shadow:var(--glow)}
.p-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.p-card.c-wecom::before{background:linear-gradient(90deg,#34d399,#10b981)}
.p-card.c-wecom:hover{border-color:rgba(52,211,153,.3)}
.p-card.c-dingtalk::before{background:linear-gradient(90deg,#38bdf8,#0ea5e9)}
.p-card.c-dingtalk:hover{border-color:rgba(56,189,248,.3)}
.p-card.c-lark::before{background:linear-gradient(90deg,#818cf8,#6366f1)}
.p-card.c-lark:hover{border-color:rgba(129,140,248,.3)}
.p-card.c-dreamina::before{background:linear-gradient(90deg,#f472b6,#ec4899)}
.p-card.c-dreamina:hover{border-color:rgba(244,114,182,.3)}
.p-card.c-gws::before{background:linear-gradient(90deg,#facc15,#f59e0b)}
.p-card.c-gws:hover{border-color:rgba(250,204,21,.3)}
.p-card.c-gh::before{background:linear-gradient(90deg,#a78bfa,#7c3aed)}
.p-card.c-gh:hover{border-color:rgba(167,139,250,.3)}
.p-card.c-npm::before{background:linear-gradient(90deg,#fb923c,#ea580c)}
.p-card.c-npm:hover{border-color:rgba(251,146,60,.3)}
.p-card.c-react-native::before{background:linear-gradient(90deg,#22d3ee,#06b6d4)}
.p-card.c-react-native:hover{border-color:rgba(34,211,238,.3)}

.p-card .p-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.p-card h3{font-size:1rem;font-weight:700}
.p-card .count{font-size:1.6rem;font-weight:800;opacity:.8}
.p-card.c-wecom .count{color:#34d399}
.p-card.c-dingtalk .count{color:#38bdf8}
.p-card.c-lark .count{color:#818cf8}
.p-card.c-dreamina .count{color:#f472b6}
.p-card.c-gws .count{color:#facc15}
.p-card.c-gh .count{color:#a78bfa}
.p-card.c-npm .count{color:#fb923c}
.p-card.c-react-native .count{color:#22d3ee}
.p-card .p-desc{font-size:0.82rem;color:var(--text-dim);margin-bottom:14px;line-height:1.6}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:0.65rem;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--text-dim)}

/* ── Terminal Demo ────────────────────────── */
.terminal-section{padding:80px 0}
.terminal{max-width:680px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.3)}
.terminal-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--surface2);border-bottom:1px solid var(--border)}
.terminal-dot{width:12px;height:12px;border-radius:50%}
.terminal-dot.r{background:#ef4444}.terminal-dot.y{background:#eab308}.terminal-dot.g{background:#22c55e}
.terminal-bar span{flex:1;text-align:center;font-size:0.75rem;color:var(--text-dim)}
.terminal-body{padding:20px 24px;font-family:"JetBrains Mono",monospace;font-size:0.82rem;line-height:2;color:var(--text-dim)}
.terminal-body .cmd{color:var(--green)}
.terminal-body .prompt{color:var(--accent);user-select:none}
.terminal-body .output{color:var(--text-dim);opacity:.7}
.terminal-body .highlight{color:var(--text);font-weight:500}

/* ── API ──────────────────────────────────── */
.api-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.api-item{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color .2s}
.api-item:hover{border-color:var(--accent)}
.api-method{font-family:"JetBrains Mono",monospace;font-size:0.72rem;font-weight:600;padding:4px 10px;border-radius:6px;background:rgba(56,189,248,.1);color:var(--accent);white-space:nowrap}
.api-path{font-family:"JetBrains Mono",monospace;font-size:0.85rem;color:var(--text)}
.api-desc{font-size:0.78rem;color:var(--text-dim)}

/* ── Footer ───────────────────────────────── */
footer{text-align:center;padding:48px 0;color:var(--text-dim);font-size:0.82rem;border-top:1px solid var(--border)}

/* ── Responsive ───────────────────────────── */
@media(max-width:900px){.providers-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .hero{padding:64px 0 48px}
  .hero h1{font-size:2rem}
  .pain-solution{flex-direction:column}
  .stats-bar{gap:28px;flex-wrap:wrap}
  .stat .num{font-size:2rem}
  .providers-grid{grid-template-columns:1fr}
  nav .links{display:none}
  .install-row{flex-direction:column}
  .api-grid{grid-template-columns:1fr}
}