.hero{
    /* 高度由 body / main 的 flex 分配（撑满页脚以上的空间），不写死 100vh ——
       写死的话加上页脚就会多出一条滚动条 */
    flex:1 1 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;
}

.sub{
    letter-spacing:8px;
    opacity:0.6;
    margin-bottom:20px;
}

.hero h1{
    font-size:72px;
    margin-bottom:24px;
    /* 粗体在两种浏览器里的统一处理见 global.css（h1 那组规则）：
       字体只有 Regular 字面，所以关掉浏览器的字重合成、用同色描边模拟粗体。 */
}

.desc{
    opacity:0.75;
    margin-bottom:40px;
}

.enter-btn{
    /* 真链接（<a>）代替 <button>：可被预渲染/预取，支持中键与新标签打开。
       外观走 global.css 里那套控件令牌；字体族由 global.css 的「*」规则统一给 Sarasa。 */
    display:inline-block;
    font-size:15px;
    letter-spacing:2px;
    text-decoration:none;

    padding:12px 32px;

    color:var(--ctl-fg);
    background:var(--ctl-bg);

    border:1px solid var(--ctl-border);
    border-radius:var(--ctl-radius);

    cursor:pointer;

    transition:var(--ctl-transition);
}

.enter-btn:hover,
.enter-btn:focus-visible{
    color:var(--ctl-fg-hover);
    background:var(--ctl-bg-strong);
    border-color:var(--ctl-border-hover);
}

/* ==========================================================================
   移动端适配
   ========================================================================== */
@media (max-width: 768px){

    .hero{
        /* 高度仍然交给 flex；手机地址栏占高度的问题由 body 的 min-height:100svh 处理
           （见 global.css 的窄屏片段），这里不再写死 100svh */
        padding: 0 20px;
    }

    .sub{
        font-size: 12px;
        letter-spacing: 3px;      /* 8px 时那句英文会超出窄屏 */
        margin-bottom: 14px;
    }

    .hero h1{
        /* 10 个字的 slogan：320px 屏也放得下，随屏宽平滑放大 */
        font-size: clamp(26px, 8.4vw, 56px);
        letter-spacing: 0;
        margin-bottom: 18px;
    }

    .desc{
        font-size: 13px;
        margin-bottom: 28px;
    }

    .enter-btn{
        padding: 12px 24px;
    }
}