/* =========================================================
   门户首页 · 极简浅灰蓝（portal.css v5 · 大改版（全幅影像/深色统计带/无边框卡片））
   ---------------------------------------------------------
   设计语言：
     - 浅灰底 #F6F7F8，白卡片 + 1px #E7EAEE 细边，大圆角
     - 墨色文字 #17191C，弱化灰 #7A828C
     - 低饱和蓝点缀 #4A6FA5（hover #3D5F90）
     - 衬线大标题（Georgia / 宋体系），正文无衬线
     - 大量留白，无横幅大图、无炫酷特效
   首屏为纯静态文字 Hero（#index-swiper 结构保留以兼容
   main.js 的 Swiper 初始化，仅单页无轮播行为）。
   依赖 site-ui.css（令牌与导航/页脚）。
   ========================================================= */

/* ===================== 首屏 Hero（浅灰 · 静态） =====================
   Hero 独立于 #index-swiper（后者仅保留隐藏空壳兼容 main.js，
   避免 basis.css 对轮播结构的绝对定位样式造成错位）。 */
.hero{
    padding:170px 0 130px;
    /* v5 大改版：全幅影像 + 深色渐晕，白字压图 */
    background:
        linear-gradient(118deg, rgba(13,22,36,.86) 0%, rgba(19,33,52,.62) 52%, rgba(13,22,36,.38) 100%),
        url('/home/img/hero_town.jpg') center / cover no-repeat;
    border-bottom:none;
}
.hero-in{ max-width:860px; }
.hero-kicker{
    display:inline-flex; align-items:center; gap:9px;
    color:#A9C4E8; font-size:13px; font-weight:600; letter-spacing:.18em;
    margin-bottom:24px;
}
.hero-kicker .hc-dot{
    width:7px; height:7px; border-radius:50%; background:#8AA6C9;
    box-shadow:0 0 0 4px rgba(138,166,201,.18);
}
.hero h1{
    font-family:var(--ui-serif);
    font-size:60px; line-height:1.18; font-weight:700;
    color:#FFFFFF; letter-spacing:1px; margin:0 0 24px;
    text-shadow:0 2px 24px rgba(8,14,24,.45);
}
.hero h1 em{
    font-style:normal; color:#9CC2F0;
}
.hero-sub{
    color:#C9D6E6; font-size:17px; line-height:1.9;
    max-width:620px; margin:0 0 38px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero-btn{
    display:inline-flex; align-items:center; gap:8px;
    height:50px; padding:0 32px; border-radius:999px;
    font-size:15px; font-weight:600; letter-spacing:1px;
    transition:background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
    box-sizing:border-box; line-height:48px;
}
.hero-btn.main{
    background:#FFFFFF; color:#1F3A5F !important; border:1px solid #FFFFFF;
}
.hero-btn.main:hover{ background:#EDF2F8; border-color:#EDF2F8; box-shadow:0 14px 34px rgba(8,14,24,.35); }
.hero-btn.ghost{
    background:rgba(255,255,255,.08); color:#FFFFFF !important; border:1px solid rgba(255,255,255,.38);
}
.hero-btn.ghost:hover{ border-color:#FFFFFF; background:rgba(255,255,255,.16); }

.hero-facts{ display:flex; gap:0; flex-wrap:wrap; padding:0; margin:0; list-style:none; }
.hero-facts li{
    font-size:13px; color:#AFC0D4;
}
.hero-facts li + li::before{ content:"·"; margin:0 12px; color:rgba(175,192,212,.4); }

/* ===================== 数据统计带 ===================== */
.stats-band{ background:#101826; }
.stats-band .w1280{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:20px; padding-top:58px; padding-bottom:58px;
}
.stat-item{ text-align:left; }
.stat-item h2{
    font-family:var(--ui-serif); font-size:46px; font-weight:700;
    color:#FFFFFF; line-height:1; margin:0;
    display:inline-flex; align-items:baseline; gap:3px;
}
.stat-item h2 i{ font-style:normal; font-size:17px; color:#8AA6C9; font-weight:400; }
.stat-item p{ color:#93A3B8; font-size:13px; margin:12px 0 0; letter-spacing:.04em; }

/* ===================== 区块通用标题 ===================== */
.sec{ padding:104px 0; }
.sec-head{ margin-bottom:44px; }
.sec-head h2{
    font-family:var(--ui-serif);
    color:var(--ui-ink); font-weight:700; font-size:34px; letter-spacing:.5px;
    margin:0 0 10px; padding:0;
}
.sec-head h2::after{ content:none; }
.sec-head p{ color:var(--ui-muted); font-size:14.5px; margin:0; }
.sec-head.center{ text-align:center; }
.sec-head.center p{ max-width:560px; margin:0 auto; }
.sec-head .sec-link{ color:var(--ui-blue); font-size:14px; font-weight:600; }
.sec-head .sec-link:hover{ color:var(--ui-blue-d); }

/* ===================== 产品与服务 ===================== */
.prod-grid{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:18px; list-style:none; margin:0; padding:0;
}
.prod-grid li{ display:flex; }
.prod-card{
    background:var(--ui-card); border:1px solid transparent;
    border-radius:18px; padding:30px 28px;
    display:flex; flex-direction:column; width:100%;
    box-shadow:0 2px 12px rgba(23,32,45,.05);
    transition:box-shadow .22s ease, transform .22s ease;
}
.prod-card:hover{
    box-shadow:0 16px 36px rgba(74,111,165,.14);
    transform:translateY(-4px);
}
.prod-card h2{ color:var(--ui-ink); font-size:18px; margin:0 0 8px; padding:0; }
.prod-card .desc{ color:var(--ui-muted); font-size:13.5px; line-height:1.8; flex:1; }
.prod-card .jg{ color:var(--ui-ink); font-weight:600; margin:16px 0 0; font-size:13px; }
.prod-card .jg span{ color:var(--ui-blue); font-size:26px; font-weight:700; margin-right:2px; }

/* ===================== 开服助手（官网内置板块） ===================== */
.kszs-band{ background:var(--ui-bg-soft); }
.kszs-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.kz-card{
    background:#fff; border:1px solid var(--ui-line);
    border-radius:var(--ui-r); padding:24px 20px;
    display:flex; flex-direction:column;
    transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.kz-card:hover{
    border-color:var(--ui-blue-l); transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(74,111,165,.08);
}
.kz-ico{
    width:44px; height:44px; border-radius:12px;
    display:grid; place-items:center; margin-bottom:16px;
    background:var(--ui-blue-soft); color:var(--ui-blue);
    border:1px solid var(--ui-blue-ring);
}
.kz-ico svg{ width:21px; height:21px; }
.kz-card h3{ color:var(--ui-ink); font-size:15.5px; font-weight:600; margin:0 0 7px; padding:0; }
.kz-card p{ color:var(--ui-muted); font-size:13px; line-height:1.75; flex:1; margin:0 0 14px; }
.kz-card .kz-go{ color:var(--ui-blue); font-size:13px; font-weight:600; }
.kz-card:hover .kz-go{ color:var(--ui-blue-d); }

/* 三步开服 */
.kszs-steps{
    margin-top:18px; background:#fff; border:1px solid var(--ui-line);
    border-radius:var(--ui-r); padding:26px 30px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.kszs-steps .step{ display:flex; gap:14px; align-items:flex-start; }
.kszs-steps .num{
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    display:grid; place-items:center;
    background:var(--ui-blue); color:#fff; font-size:13.5px; font-weight:700;
}
.kszs-steps b{ display:block; color:var(--ui-ink); font-size:14.5px; margin-bottom:4px; }
.kszs-steps span{ color:var(--ui-muted); font-size:12.8px; line-height:1.7; display:block; }

/* ===================== 底部联系区（首页专属强调版） ===================== */
.contact-band{ background:#16233A; }
.contact-band .cb-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.contact-band .cb-card:hover{ border-color:rgba(255,255,255,.30); box-shadow:0 14px 34px rgba(5,10,18,.4); }
.contact-band .cb-t{ color:#93A3B8; }
.contact-band .cb-v{ color:#FFFFFF; }
.contact-band .cb-d{ color:#7E8FA5; }
.contact-band .cb-hot .cb-v{ color:#9CC2F0; }
.contact-band .cb-ico{ background:rgba(148,168,196,.14); border-color:rgba(148,168,196,.25); color:#A9C4E8; }
.contact-band .sec-head h2{ color:#FFFFFF; }
.contact-band .sec-head p{ color:#93A3B8; }
.contact-band .cb-qr{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.contact-band .cb-qr em{ color:#93A3B8; }
.cb-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;
}
.cb-card{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:12px;
    background:#fff; border:1px solid var(--ui-line);
    border-radius:var(--ui-r); padding:20px 18px;
    text-decoration:none; transition:.22s ease;
}
.cb-card:hover{
    border-color:var(--ui-blue-l);
    box-shadow:0 10px 24px rgba(74,111,165,.08);
    transform:translateY(-2px);
}
.cb-ico{
    width:48px; height:48px; border-radius:13px; flex-shrink:0;
    display:grid; place-items:center;
    background:var(--ui-blue-soft); border:1px solid var(--ui-blue-ring);
    color:var(--ui-blue);
}
.cb-ico svg{ width:22px; height:22px; }
.cb-ico .iconfont{ font-size:23px; }
.cb-info{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.cb-t{ font-size:12.5px; color:var(--ui-muted); letter-spacing:1px; }
.cb-v{ font-size:16.5px; font-weight:700; color:var(--ui-ink); margin-top:3px; word-break:break-all; line-height:1.35; }
.cb-d{ font-size:12.5px; color:var(--ui-muted); margin-top:4px; }
.cb-hot .cb-v{ font-size:19px; color:var(--ui-blue); }
.cb-qrs{ display:flex; gap:10px; margin-top:9px; }
.cb-qr{
    display:flex; flex-direction:column; align-items:center; gap:5px;
    background:var(--ui-bg); border:1px solid var(--ui-line); border-radius:10px; padding:7px;
}
.cb-qr img{ width:82px; height:82px; object-fit:cover; border-radius:6px; display:block; }
.cb-qr em{ font-style:normal; font-size:11px; color:var(--ui-muted); max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===================== 页脚微信小二维码（site-ui 联系区补充） ===================== */
.ftc-qrs{ display:flex; gap:6px; margin-top:6px; }
.ftc-qr img{ width:64px; height:64px; object-fit:cover; border-radius:6px; border:1px solid var(--ui-line); display:block; background:#fff; }

/* ===================== 响应式 ===================== */
@media (max-width:1100px){
    .prod-grid{ grid-template-columns:repeat(2,1fr); }
    .kszs-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:960px){
    .hero{ padding:130px 0 88px; }
    .hero h1{ font-size:40px; }
    .hero-sub{ font-size:15px; }
    .stats-band .w1280{ grid-template-columns:repeat(2,1fr); gap:28px; }
    .sec{ padding:64px 0; }
    .kszs-grid{ grid-template-columns:repeat(2,1fr); }
    .kszs-steps{ grid-template-columns:1fr; }
}
@media (max-width:640px){
    .hero{ padding:110px 0 64px; }
    .hero h1{ font-size:32px; }
    .hero-btn{ height:44px; line-height:42px; padding:0 22px; font-size:14px; }
    .stats-band .w1280{ grid-template-columns:1fr 1fr; }
    .stat-item h2{ font-size:30px; }
    .prod-grid,.kszs-grid{ grid-template-columns:1fr; }
    .sec-head h2{ font-size:24px; }
    .cb-grid{ grid-template-columns:1fr; }
}

/* ===== 服务器实况（玩家实拍图卡片） ===== */
.gal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.gal-card{ margin:0; position:relative; border-radius:18px; overflow:hidden;
	background:#000; border:1px solid var(--ui-line); box-shadow:0 6px 16px rgba(28,25,23,.07);
	transition:box-shadow .22s ease; }
.gal-card:hover{ box-shadow:0 12px 26px rgba(28,25,23,.12); }
.gal-card img{ width:100%; height:400px; object-fit:cover; display:block; }
.gal-card figcaption{ position:absolute; left:0; right:0; bottom:0; padding:56px 18px 16px;
	background:linear-gradient(180deg, transparent, rgba(10,12,16,.82)); color:#fff; }
.gal-tag{ display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.5px;
	background:rgba(74,111,165,.92); color:#fff; border-radius:999px; padding:2px 10px; margin-bottom:6px; }
.gal-card h3{ margin:0 0 4px; font-size:16.5px; font-weight:700; }
.gal-card p{ margin:0; font-size:13px; opacity:.88; }
@media (max-width:860px){
	.gal-grid{ grid-template-columns:1fr; }
	.gal-card img{ height:230px; }
	/* 窄屏文字占满宽度，背景图遮罩加强保证可读 */
	.hero{
		background:
			linear-gradient(180deg, rgba(246,247,248,.96), rgba(246,247,248,.9)),
			url('/home/img/hero_town.jpg') center / cover no-repeat,
			var(--ui-bg);
	}
}