/* ─────────────────────────────────────────
   Reset
───────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body,div,button,span,h1,h2,p,ul,li{-webkit-user-select:none;user-select:none}
img{border:0;display:block}
button{font-family:inherit;cursor:pointer}

/* ─────────────────────────────────────────
   Base（PC）
───────────────────────────────────────── */
body{
  min-height:100vh;
  background:#09060f;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ─────────────────────────────────────────
   PC 顶栏
───────────────────────────────────────── */
.top-wrap{
  height:78px;
  background:#1a1a1a;
  box-shadow:0 1px 10px rgba(0,0,0,.5);
}
.top{
  max-width:1265px;
  height:78px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.top-logo{display:flex;align-items:center;gap:13px}
.top-logo-icon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,#e0245e,#9333ea);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:900;color:#fff;flex-shrink:0;
}
.top-logo-name{font-size:19px;font-weight:800;color:#fff}
.top-logo-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px}
.top-right{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.5)}
.top-right strong{font-size:22px;font-weight:900;color:#fff;letter-spacing:.5px}

/* ─────────────────────────────────────────
   PC 主容器
───────────────────────────────────────── */
.container{
  max-width:1265px;
  margin:0 auto;
  padding:36px 20px 60px;
}

/* ─────────────────────────────────────────
   Section 标题
───────────────────────────────────────── */
.sec-title{
  font-size:22px;font-weight:600;color:#fff;
  margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.sec-title::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.sec-sep{height:36px}

/* ─────────────────────────────────────────
   Section 1 — 竖卡（上方3个）
───────────────────────────────────────── */
.grid-top{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.mob-only{display:none!important}
.pc-only{display:flex!important}
.card-v{
  background:linear-gradient(160deg,#1e1433 0%,#150f26 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:32px 20px 22px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  cursor:pointer;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  position:relative;
  overflow:hidden;
}
.card-v:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  border-color:rgba(255,255,255,.16);
}

/* logo — 苹果图标圆角方形 */
.card-v .logo-wrap{
  width:96px;height:96px;border-radius:22%;
  overflow:hidden;
  border:none;
  margin-bottom:18px;
  background:#111;
  flex-shrink:0;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.card-v .logo-wrap img{width:100%;height:100%;object-fit:cover}

.card-v .app-name{
  font-size:18px;font-weight:700;color:#fff;
  margin-bottom:6px;line-height:1.3;
}
.card-v .app-sub{
  font-size:12px;color:rgba(255,255,255,.4);
  margin-bottom:22px;
}

/* 按钮区 */
.card-v .btns{
  width:100%;display:flex;flex-direction:column;gap:8px;
  margin-top:auto;
}
.btn-app{
  width:100%;padding:11px 0;border-radius:10px;
  background:linear-gradient(90deg,#e0245e,#9333ea);
  color:#fff;font-size:14px;font-weight:700;border:none;
  transition:filter .2s;
}
.btn-app:hover{filter:brightness(1.12)}
.btn-web{
  width:100%;padding:9px 0;border-radius:10px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.7);
  font-size:13px;font-weight:600;
  border:1px solid rgba(255,255,255,.15);
  transition:background .2s;
}
.btn-web:hover{background:rgba(255,255,255,.13)}

/* ─────────────────────────────────────────
   Section 2 — 横卡（下方3个）
───────────────────────────────────────── */
.grid-bot{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.card-h{
  background:linear-gradient(90deg,#1e1433 0%,#150f26 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:0 24px;
  height:96px;
  display:flex;
  align-items:center;
  gap:20px;
  cursor:pointer;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.card-h:hover{
  transform:scale(1.015);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.14);
}

.card-h .logo-wrap{
  width:60px;height:60px;border-radius:22%;
  overflow:hidden;border:none;
  background:#111;flex-shrink:0;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.card-h .logo-wrap img{width:100%;height:100%;object-fit:cover}

.card-h .app-info{flex:1;min-width:0}
.card-h .app-name{font-size:17px;font-weight:700;color:#fff;margin-bottom:4px}
.card-h .app-sub{font-size:12px;color:rgba(255,255,255,.38)}

.card-h .h-btns{display:flex;gap:8px;flex-shrink:0}
.h-btn-app{
  padding:8px 22px;border-radius:8px;
  background:linear-gradient(90deg,#e0245e,#9333ea);
  color:#fff;font-size:13px;font-weight:700;border:none;
  white-space:nowrap;transition:filter .2s;
}
.h-btn-app:hover{filter:brightness(1.12)}
.h-btn-web{
  padding:8px 16px;border-radius:8px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.65);
  font-size:13px;font-weight:600;
  border:1px solid rgba(255,255,255,.15);
  white-space:nowrap;
}
.h-btn-web:hover{background:rgba(255,255,255,.14)}

/* ─────────────────────────────────────────
   PC Footer
───────────────────────────────────────── */
.pc-footer{
  text-align:center;padding:20px;
  font-size:12px;color:rgba(255,255,255,.28);
}
.pc-footer a{color:rgba(255,255,255,.45);text-decoration:none}

/* ─────────────────────────────────────────
   手机 Hero（PC 隐藏）
───────────────────────────────────────── */
.mobile-hero{display:none}

/* ═══════════════════════════════════════════
   MOBILE（≤ 768px）
═══════════════════════════════════════════ */
@media(max-width:768px){

  body{background:#09060f}

  .top-wrap{display:none}
  .pc-footer{display:none}

  /* ── Hero ── */
  .mobile-hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:36px 20px 32px;
    background:radial-gradient(ellipse 120% 100% at 50% 0%,#2a1040 0%,#09060f 70%);
    text-align:center;
    gap:4px;
  }
  .hero-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .hero-icon{
    width:44px;height:44px;border-radius:12px;
    background:linear-gradient(135deg,#e0245e,#9333ea);
    display:flex;align-items:center;justify-content:center;
    font-size:19px;font-weight:900;color:#fff;flex-shrink:0;
  }
  .hero-title{font-size:21px;font-weight:800;color:#fff}
  .hero-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:1px}
  .hero-addr-label{font-size:12px;color:rgba(255,255,255,.45);margin-top:4px}
  .hero-domain{font-size:30px;font-weight:900;letter-spacing:1px;color:#fff}

  /* ── 主区 ── */
  .container{padding:20px 14px 50px}

  .sec-title{font-size:17px;margin-bottom:14px}
  .sec-sep{height:24px}

  .mob-only{display:flex!important}
  .pc-only{display:none!important}

  /* ── Section 1 手机：单列横卡 ── */
  .grid-top{
    grid-template-columns:1fr;
    gap:12px;
  }
  .card-v{
    flex-direction:row;
    text-align:left;
    padding:16px 18px;
    border-radius:14px;
    gap:16px;
  }
  .card-v:hover{transform:none;box-shadow:none}
  .card-v:active{background:#221940}

  .card-v .logo-wrap{
    width:60px;height:60px;
    border-radius:22%;
    margin-bottom:0;flex-shrink:0;
  }

  .btn-app{width:auto;padding:8px 18px;font-size:13px}
  .btn-web{width:auto;padding:7px 14px;font-size:12px}

  /* ── Section 2 手机：横卡全宽 ── */
  .card-h{height:80px;padding:0 16px;gap:14px;border-radius:12px}
  .card-h:hover{transform:none;box-shadow:none}
  .card-h:active{background:#221940}

  .card-h .logo-wrap{width:50px;height:50px}
  .card-h .app-name{font-size:15px}
  .h-btn-app{padding:7px 16px;font-size:12px}
  .h-btn-web{padding:6px 12px;font-size:12px}
  .card-h .app-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
}

@media(max-width:380px){
  .hero-domain{font-size:26px}
  .card-v .logo-wrap{width:54px;height:54px}
}