.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--nav-h) + 4vh);padding-bottom:28px;overflow:clip;isolation:isolate}
.spot{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,70%) var(--my,35%),rgba(255,171,25,.075),transparent 62%),
             radial-gradient(900px circle at 15% 110%,rgba(244,241,234,.035),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;flex:1}
.hero-l{grid-column:1 / span 8;min-width:0}
.hero-r{grid-column:9 / span 4;min-width:0;display:flex;justify-content:flex-end}
.mega{font-size:clamp(3.1rem,7.6vw,9.6rem);font-weight:600;letter-spacing:-.05em;line-height:1.02;margin:clamp(20px,3.2vh,40px) 0 clamp(20px,3vh,36px)}
:lang(zh) .mega{letter-spacing:-.045em;line-height:1.08}
.mega em{letter-spacing:-.02em;font-size:1.08em;padding-right:.04em}
.hero-sub{max-width:30em;color:var(--ink-2);font-size:clamp(1rem,1.15vw,1.2rem)}

/* workspace card */
.ws{width:min(100%,400px);border:1px solid var(--line-2);border-radius:18px;background:var(--panel);position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,171,25,.03),0 40px 80px -40px rgba(0,0,0,.8)}
.ws-bar,.code-bar,.term-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.ws-bar i,.code-bar i,.term-bar i{width:8px;height:8px;border-radius:50%;background:rgba(244,241,234,.14)}
.ws-t,.code-bar span,.term-bar span{margin-left:10px;letter-spacing:.02em}
.ws-body{padding:26px 28px 18px;background-image:radial-gradient(rgba(244,241,234,.07) 1px,transparent 1px);background-size:22px 22px;background-position:6px 6px;min-height:300px}
.ws-body svg{width:100%;max-width:330px;height:auto;overflow:visible}
.ws-cap{display:flex;justify-content:center;align-items:center;gap:14px;padding:12px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-2);opacity:0}
.ws-cap b{color:var(--accent);font-weight:500;font-size:15px}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;font-size:12px;color:var(--ink-3)}
.scroll-cue{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--ink-3),transparent);transform-origin:top;animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* intro */
.intro{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;align-content:center;gap:22px}
.intro-mark{font-size:clamp(1.4rem,3vw,2.2rem)}
.intro-mark i{font-size:1.25em}
.intro-line{width:min(240px,40vw);height:1px;background:var(--accent);transform-origin:left}

@media (max-width:1000px){
  .hero-l{grid-column:1 / -1}
  .hero-r{grid-column:1 / -1;justify-content:flex-start;margin-top:36px}
  .ws{width:min(100%,360px)}
  .hero{justify-content:flex-start}
  .mega{font-size:clamp(3rem,14vw,7rem)}
}
@media (max-width:560px){
  .hero .eyebrow span:last-child{display:none}
  .hero .eyebrow .rule{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start}
}
@media (min-width:2000px){.mega{font-size:11.5rem}}