/* ==========================================================================
   KimiVPN — home.css（首页专属样式）
   只补设计系统未覆盖的部分：首屏网格 / 纸感颗粒层 / 卖点拼盘排布 /
   线路状态组件皮肤。颜色、圆角、阴影一律引用 :root 令牌。
   ========================================================================== */

/* ---------- 页面纸感颗粒 + 站点包裹层 ---------- */
.grain-page{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.032;mix-blend-mode:multiply;
}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.site{position:relative;z-index:1}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  background:linear-gradient(180deg,var(--bg-hero-top) 0%,var(--bg-hero-bot) 100%);
  padding-top:52px;
  padding-bottom:56px;
  overflow-x:clip;
  max-width:100%;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 45%,var(--accent-tint) 0%,transparent 70%),
    radial-gradient(40% 40% at 12% 85%,var(--dusk-glow) 0%,transparent 70%);
}
.hero .wrap{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:56px;
  align-items:center;
}
.hero-copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;
}
.hero-copy h1{margin:24px 0 32px}
.hero-copy .lede{margin-top:26px;max-width:520px}
.hero-copy .trust{margin-top:22px}

/* ---------- 卖点拼盘：移动端砖在前、详情在后 ---------- */
.tray-copy{min-width:0}
.bricks .brick{font:inherit}
.brick .brick-ico{display:grid;place-items:center}

/* ---------- 线路状态组件皮肤（容器由 servers.js 注入） ---------- */
.server-status.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 20px;
  overflow:hidden;
  max-width:100%;
}
.server-status:empty{display:none}
.server-status .srv-row{
  display:flex;align-items:center;gap:10px;
  min-height:46px;padding:0 14px;
  background:var(--panel);border-radius:var(--r-sm);
  box-shadow:var(--shadow-soft);
  min-width:0;max-width:100%;
  font-size:14px;font-weight:600;color:var(--ink);
}
.server-status .srv-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--success);box-shadow:0 0 0 3px var(--success-tint);
  animation:srv-breath 2.4s ease-in-out infinite;
}
@keyframes srv-breath{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.86)}
}
.server-status .srv-flag{width:22px;height:15px;border-radius:3px;flex-shrink:0}
.server-status .srv-name{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.server-status .srv-type{
  flex-shrink:0;white-space:nowrap;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--accent);background:var(--accent-tint);
  border-radius:var(--r-pill);padding:3px 9px;
}
.server-status .srv-ms{
  flex-shrink:0;white-space:nowrap;
  font-family:var(--font-mono);font-size:12.5px;color:var(--muted);
}
.server-status .srv-bw{
  flex-shrink:0;white-space:nowrap;
  font-family:var(--font-mono);font-size:12.5px;color:var(--muted-2);
}

/* ---------- 首页补充排版 ---------- */
.line-note{
  margin-top:14px;font-size:14.5px;line-height:1.75;color:var(--muted);
}
.sec-foot{
  margin-top:24px;font-size:15px;color:var(--muted);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.pack-note{
  margin-top:24px;
  background:var(--panel-2);border-radius:var(--r-lg);
  padding:26px 28px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.pack-note h3{font-size:18px}
.pack-note p{margin-top:10px;font-size:15px;line-height:1.8;color:var(--muted)}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .hero .wrap{gap:36px}
}
@media (max-width:1180px) and (min-width:641px){
  .win-body{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width:1024px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero{padding-top:36px;padding-bottom:44px}
  .bricks{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .server-status.server-status{grid-template-columns:minmax(0,1fr)}
  .pack-note{padding:20px 18px}
}
@media (max-width:640px){
  .hero{padding-top:26px;padding-bottom:32px}
  .hero-copy h1{margin:18px 0 22px}
  .hero-copy .lede{margin-top:20px}
  .hero-copy .btn-row,.hero-copy .btn{width:100%}
  .bricks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .server-status .srv-bw{display:none}
}
@media (prefers-reduced-motion:reduce){
  .server-status .srv-dot{animation:none}
}