:root{
  --bg:#111418;
  --card:#1a1f24;
  --card-hover:#222930;
  --text:#e6edf3;
  --muted:#a9b4bf;
  --brand:#8ab4ff;
  --border:#2a323a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}

.container{max-width:1200px;margin:0 auto;padding:24px}
.site-header{border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(17,20,24,.8);backdrop-filter:saturate(1.2) blur(8px)}
.brand{font-size:40px;margin:12px 0 8px}

.section-heading{margin:24px 0}

.card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
@media (max-width:1100px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .card-grid{grid-template-columns:1fr}
}

.card{
  display:flex;
  flex-direction:column;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--border);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-3px);background:var(--card-hover);border-color:#37414b}

.phone-shot{padding:18px 18px 0}
.phone-shot img{width:100%;height:auto;border-radius:16px;border:1px solid var(--border);background:#0c0f12;display:block}

.card-text{padding:14px 16px 18px;text-align:center}
.card-text h3{margin:6px 0 6px;font-size:18px;font-weight:600}
.card-text p{margin:0;color:var(--muted)}

.site-footer{border-top:1px solid var(--border);margin-top:24px}
.site-footer small{color:var(--muted)}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}