/* =============================================
   u.nickys.cn · 又拍云 CDN 演示站 共享样式
   ============================================= */

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
  background:#0d1117; color:#e6edf3; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---- Navbar ---- */
.navbar {
  position:sticky; top:0; z-index:100;
  background:rgba(13,17,23,0.85); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-inner {
  max-width:960px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; height:56px;
}
.logo {
  font-size:18px; font-weight:700; text-decoration:none;
  background:linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; margin-right:40px;
}
.nav-links { display:flex; gap:24px; }
.nav-links a {
  color:#8b949e; text-decoration:none; font-size:14px; font-weight:500;
  padding:4px 0; transition:color .2s; position:relative;
}
.nav-links a:hover { color:#e6edf3; }
.nav-links a.active { color:#fff; }
.nav-links a.active::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:2px; background:linear-gradient(90deg,#667eea,#764ba2); border-radius:1px;
}

/* ---- Hero ---- */
.hero {
  position:relative; overflow:hidden;
  padding:80px 20px; text-align:center;
}
.hero-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(102,126,234,0.12) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.08) 0%, transparent 50%);
  pointer-events:none;
}
.hero-content { position:relative; max-width:640px; margin:0 auto; }
.hero h1 { font-size:40px; font-weight:800; line-height:1.2; margin-bottom:16px; }
.hero-sub { color:#8b949e; font-size:16px; line-height:1.7; margin-bottom:24px; }
.hero-badges { display:flex; gap:10px; justify-content:center; margin-bottom:32px; flex-wrap:wrap; }

/* ---- Badges ---- */
.badge {
  display:inline-block; padding:5px 14px; border-radius:20px;
  font-size:12px; font-weight:600; border:1px solid rgba(255,255,255,0.12);
}
.badge-https { background:rgba(74,222,128,0.1); color:#4ade80; border-color:rgba(74,222,128,0.25); }
.badge-upyun { background:rgba(102,126,234,0.1); color:#667eea; border-color:rgba(102,126,234,0.25); }
.badge-nas   { background:rgba(251,191,36,0.1); color:#fbbf24; border-color:rgba(251,191,36,0.25); }

/* ---- Button ---- */
.btn-primary {
  display:inline-block; padding:14px 36px; border-radius:12px;
  background:linear-gradient(135deg,#667eea,#764ba2); color:#fff;
  font-size:16px; font-weight:600; text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(102,126,234,0.35); }

/* ---- Cards (home) ---- */
.cards {
  max-width:960px; margin:0 auto; padding:0 20px 60px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px;
}
.card {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:28px 24px; text-decoration:none; color:inherit;
  transition:transform .2s,border-color .2s,background .2s;
}
.card:hover { transform:translateY(-4px); border-color:#667eea; background:rgba(102,126,234,0.06); }
.card-icon { font-size:36px; margin-bottom:16px; }
.card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
.card p { font-size:14px; color:#8b949e; line-height:1.6; }
.card-link { display:inline-block; margin-top:12px; font-size:13px; color:#667eea; font-weight:500; }

/* ---- Specs ---- */
.specs {
  max-width:720px; margin:0 auto 60px; padding:0 20px;
}
.specs h2 { font-size:24px; margin-bottom:24px; }
.spec-grid { display:grid; gap:1px; background:rgba(255,255,255,0.06); border-radius:12px; overflow:hidden; }
.spec-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:#0d1117;
}
.spec-label { color:#8b949e; font-size:14px; }
.spec-value { font-size:14px; font-weight:500; }
.spec-value code { background:rgba(255,255,255,0.08); padding:3px 8px; border-radius:6px; font-size:13px; }
.status-on { color:#4ade80; }
.status-off { color:#f87171; }

/* ---- Footer ---- */
.footer {
  text-align:center; padding:32px 20px; border-top:1px solid rgba(255,255,255,0.06);
  color:#484f58; font-size:13px;
}

/* ---- Responsive ---- */
@media (max-width:600px) {
  .hero h1 { font-size:28px; }
  .cards { grid-template-columns:1fr; }
  .nav-links { gap:14px; }
  .nav-links a { font-size:13px; }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#0d1117; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.2); }