/* Restore the original homepage composition without changing the intake theme. */
.hero{
  --cream:#EDE7DA;--cream-hi:#F6F2E8;--ink:#171410;--ink-soft:#3A352D;--muted:#6E675C;
  --line:rgba(23,20,16,.18);--line-strong:rgba(23,20,16,.55);--orange:#C9531D;--orange-deep:#A63E10;
  --serif:"Noto Serif SC","Songti SC","STSong",serif;
  --mono:"PT Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  font-family:var(--sans);background:var(--cream);
}
/* ---------- 封面 · 一屏 ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.hero-brand{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px clamp(20px,4vw,48px);z-index:3}
.hero-brand img{height:20px;display:block}
.hero-brand .tag{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--cream);mix-blend-mode:difference}
.hero-title-block{position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(26px,5vh,56px);z-index:3;color:var(--cream)}
.hero-title-block .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.3em;opacity:.85;display:block;margin-bottom:14px}
.hero-title-block h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,6.2vw,72px);line-height:1.12;letter-spacing:.02em}
.hero-title-block .sub{font-family:var(--mono);font-size:12px;letter-spacing:.2em;margin-top:14px;opacity:.85}

/* 门禁卡片 · 叠在封面右侧米白区 */
.gate-wrap{position:absolute;z-index:4;right:clamp(16px,5vw,72px);top:50%;transform:translateY(-50%);width:min(400px,calc(100vw - 32px))}
.gate-card{background:rgba(246,242,232,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 24px 60px -30px rgba(23,20,16,.45);padding:34px 30px 30px}
.gate-card .k{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--orange-deep);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.gate-card .k::before{content:"";width:7px;height:7px;border:1.5px solid var(--orange);display:inline-block}
.gate-card h2{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:8px}
.gate-card p{font-size:13px;color:var(--muted);margin-bottom:22px}
.gate-card input{width:100%;background:transparent;border:none;border-bottom:1.5px solid var(--line-strong);font-family:var(--mono);font-size:22px;letter-spacing:.22em;padding:10px 2px;color:var(--ink);border-radius:0;text-transform:uppercase}
.gate-card input:focus{outline:none;border-bottom-color:var(--orange)}
.gate-card input::placeholder{color:rgba(23,20,16,.25);letter-spacing:.22em}

.hero-brand img{filter:none}
#heroSection .gate-card .field input{font-family:var(--mono);font-size:22px;letter-spacing:.22em;padding:10px 2px;border-bottom:1.5px solid var(--line-strong)}
#heroSection .gate-card .field input:focus{border-bottom-color:var(--orange)}
#heroSection .gate-card .submit-btn{border:0;border-radius:0;min-height:0;font-family:var(--mono);font-size:14px;letter-spacing:.24em;padding:18px;background:var(--ink);color:var(--cream)}
#heroSection .gate-card .submit-btn:not(:disabled):hover{background:var(--orange-deep)}
#heroSection .gate-card .submit-btn:disabled{background:rgba(23,20,16,.14);color:rgba(23,20,16,.4)}
#heroSection .form-error-banner{border:1px solid var(--danger);background:rgba(158,43,18,.06);padding:13px 16px;font-size:13.5px;margin-bottom:26px}
body:has(.hero:not(.step-hidden)){background:#EDE7DA}
body:has(.hero:not(.step-hidden)) footer{max-width:none;display:block;text-align:center;padding:30px 22px 44px;border-color:rgba(23,20,16,.18)}
body:has(.hero:not(.step-hidden)) .footer-brand{font-family:"PT Mono",monospace;font-size:11px;letter-spacing:.3em}
body:has(.hero:not(.step-hidden)) .footer-links{justify-content:center;margin-top:12px;gap:22px}
@media(prefers-reduced-motion:no-preference){.hero-title-block{animation:homeEnter .7s ease-out both}.gate-card{animation:homeEnter .5s .15s ease-out both}}
@keyframes homeEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .hero-media img{object-position:30% 50%}
  .hero-title-block{bottom:auto;top:clamp(76px,14vh,130px)}
  .hero-title-block h1{font-size:clamp(34px,10vw,46px)}
  .gate-wrap{top:auto;bottom:max(20px,env(safe-area-inset-bottom));transform:none;left:16px;right:16px;width:auto}
  .gate-card{padding:26px 22px 22px}
}