*{box-sizing:border-box;margin:0;padding:0}
body{font-family:PingFang SC,Segoe UI,Helvetica,Arial;background:#0f1720;color:#e6eef8;-webkit-font-smoothing:antialiased}
.site-header{position:relative;padding:20px;text-align:center;background:linear-gradient(90deg,#071229,#0b2540);box-shadow:0 6px 18px rgba(2,6,23,.6)}
.site-header h1{color:#58a6ff;font-size:28px;margin:0}
.contact-links{position:absolute;top:18px;right:16px;display:flex;gap:12px;align-items:center}
.contact-item{display:flex;align-items:center;gap:6px;color:#b9c6d9;text-decoration:none;font-size:14px;padding:6px 8px;border-radius:8px;transition:background .15s}
.contact-item img{width:18px;height:18px;display:block}
.contact-item:hover{background:rgba(88,166,255,0.06);color:#58a6ff}

.container{max-width:1200px;margin:28px auto;padding:0 16px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;justify-items:center}
.card{width:100%;max-width:360px;background:linear-gradient(180deg,#0b1220,#091827);border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 24px rgba(2,6,23,.6);text-align:center;cursor:pointer;transition:transform .18s}
.card:hover{transform:translateY(-6px)}
.thumb{border-radius:8px;overflow:hidden}
.thumb img{width:100%;height:200px;object-fit:cover;display:block}
.card h3{margin:10px 0 4px;font-size:18px;color:#fff}
.card .desc{margin:0;color:#9fb0cc;font-size:14px}

.footer{text-align:center;padding:18px 0;color:#9fb0cc;font-size:14px;border-top:1px solid rgba(255,255,255,0.04);margin-top:30px}

/* Modal */
.modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;animation:fadeIn .2s ease-out}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}
.modal-content{position:relative;width:min(95%,1000px);z-index:2;background:transparent;border:none;box-shadow:none;border-radius:0;padding:0;animation:fadeIn .2s ease-out}
#modalVideo{width:100%;height:auto;max-height:85vh;border:none;background:transparent;outline:none;display:block;border-radius:0}

/* 淡入动画 */
@keyframes fadeIn{
  from{opacity:0;transform:scale(0.97)}
  to{opacity:1;transform:scale(1)}
}

/* 响应式布局 */
@media(max-width:820px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .contact-links{
    top:8px;           /* 往上靠 */
    right:6px;         /* 往右靠 */
    gap:6px;           /* 按钮间距更紧 */
  }
  .contact-item{
    padding:3px 6px;   /* 缩小点击区域让它不显得挤 */
    font-size:10px;
  }
  .contact-item img{
    width:14px;
    height:14px;
  }
  .thumb img{height:180px}
  #modalVideo{height:50vh}
  .site-header h1{font-size:22px;}
}

/* ✅ 超小屏（例如 iPhone SE、安卓小机型）再略微缩小 */
@media(max-width:500px){
  .site-header h1{
    font-size:19px;
  }

 .contact-item {
    font-size: 10px;      /* 缩小字体 */
    padding: 2px 2px;     /* 内边距更紧凑 */
    gap: 2px;             /* 图标与文字更近 */
  }
  .contact-item img {
    width: 12px;          /* 图标更小 */
    height: 12px;
  }